[React] useState

React의 useState: 상태 관리의 기초

useState란?

useState는 React에서 상태(state)를 관리하는 가장 기본적인 훅이다.
useState를 사용하면 컴포넌트 내부에서 변할 수 있는 값을 효과적으로 관리할 수 있다.

useState의 기본 사용법

useState를 사용하기 위해서는, 먼저 const로 선언하고 배열의 구조 분해 할당을 이용한다.
배열의 첫 번째 요소는 상태의 현재 값을 저장하고,
두 번째 요소는 그 상태를 업데이트하는 함수다.
초기값은 상태가 시작할 때의 값이다.

const [value, setValue] = useState(초기값);

제어 컴포넌트로서의 useState

React에서는 입력 필드의 상태를 관리하기 위해 onChange 이벤트 핸들러와 value 속성을 연결하는 것이 일반적이다. 이러한 패턴은 "제어 컴포넌트(Controlled Component)"라고 한다.

const App = () => {
  const [text, setText] = useState("");

  const handleInputChange = (e) => {
    setText(e.target.value);
  };

  return (
    <div>
      <input type="text" onChange={handleInputChange} value={text} />
      <br />
      {text}
    </div>
  );
};