[React] 에서 미친듯이 많이 쓰는 'useState' 이해하기

React에서 가장 많이 쓰이는 기능 중 하나이죠.  React에서는 "hooks"라는 개념을 도입하여 함수 컴포넌트에서도 상태 관리와 생명주기 메서드를 사용할 수 있게 했습니다. 이 중에서도 useState는 가장 기본적이고 중요한 훅 중 하나입니다.

useState Hook의 기본 개념

useState는 React 함수 컴포넌트에서 상태를 추가할 수 있게 해줍니다. 이는 클래스 컴포넌트의 this.state와 this.setState에 대응되는 기능을 제공합니다. useState는 두 개의 값, 즉 현재 상태 값과 해당 상태를 업데이트하는 함수를 반환합니다.

 

이제 useState의 기본 구조와 작동 방식에 대해 알아봅시다.

 

const [state, setState] = useState(initialState);

- useState는 하나의 인자를 받습니다: initialState. 이는 상태의 초기값입니다.
- useState는 배열을 반환합니다. 이 배열의 첫 번째 요소는 현재 상태의 값이고, 두 번째 요소는 상태를 업데이트하는 함수입니다.

 

아주 간단한 예제를 보면서 이해해 보겠습니다.

import React, { useState } from 'react';

function Counter() {
  // 여기서 count는 상태 변수이고, setCount는 상태를 업데이트하는 함수입니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

 

위 예제에서 useState(0)은 count라는 상태 변수를 생성하고 초기값 0을 할당합니다. 

setCount는 count 상태를 업데이트하는 함수입니다.

 

1. useState(0)를 호출하면, count라는 상태 변수를 생성하고 초기값 0을 할당합니다.

2. setCount는 count 상태를 업데이트하는 함수입니다.

3. 버튼을 클릭하면, setCount 함수를 호출하여 count 상태의 값을 1 증가시킵니다.

4. 상태가 업데이트되면, 컴포넌트는 다시 렌더링되고, 업데이트된 count 값이 화면에 표시됩니다.

 

이렇게 useState를 사용하면, 함수 컴포넌트에서도 상태를 쉽게 관리할 수 있습니다. 

useState는 매우 직관적이며, 상태 관리를 위한 기본적인 훅으로, React 앱을 만들 때 자주 사용됩니다.

 

추가 예제를 통한 이해 강화

이제 좀 더 복잡한 예제를 통해 useState의 사용법을 이해해봅시다.

import React, { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [text, setText] = useState('');

  const addTodo = () => {
    setTodos([...todos, text]);
    setText('');
  };

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

 

위 예제에서는 두 개의 상태 변수 todos와 text를 생성하고 관리합니다. addTodo 함수는 새로운 할 일을 todos 배열에 추가하고, text 상태를 빈 문자열로 리셋합니다.

이 예제를 통해 useState를 사용하여 여러 상태 변수를 관리하고, 상태 업데이트 함수를 사용하여 상태를 업데이트하는 방법을 볼 수 있습니다.

 

-

 

useState는 React의 핵심 훅 중 하나로, 

함수 컴포넌트에서 상태를 관리할 수 있게 해줍니다. 

 

간단한 카운터 앱부터 복잡한 할 일 목록 앱까지, useState는 다양한 상황에서 유용하게 사용될 수 있습니다. 

 

이를 통해 함수 컴포넌트에서도 상태 관리가 가능해지며, 더욱 간결하고 읽기 쉬운 코드를 작성할 수 있게 됩니다.