React 컴포넌트 상태 관리 – useState로 시작하기

 

React에서 가장 기본적인 상태 관리 방법인 useState에 대해 알아보겠습니다.
React 앱을 만들다 보면 버튼 클릭, 입력창 내용 변경 등으로 화면을 동적으로 변경해야 할 상황이 자주 생기는데요,
이때 필요한 것이 바로 컴포넌트 상태(state)입니다.

---

상태(state)란 무엇인가요?

state는 컴포넌트 안에서 관리되는 데이터로, 이 값이 바뀌면 해당 컴포넌트는 자동으로 다시 렌더링됩니다.
즉, 화면을 동적으로 바꾸기 위해 사용하는 핵심 기능입니다.

---

useState 훅 소개

React에서는 함수형 컴포넌트에서 상태를 사용할 수 있도록 useState 훅을 제공합니다.
사용법은 아래와 같습니다:

import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

• useState(0): count라는 상태를 0으로 초기화합니다.
• setCount: count 값을 변경하는 함수입니다.
• 버튼을 누르면 setCount가 호출되어 상태가 업데이트되고, 화면도 자동으로 갱신됩니다.

---

상태를 여러 개 사용하는 예제

useState는 하나의 컴포넌트 안에서 여러 개 사용할 수 있습니다.

function Profile() {
  const [name, setName] = useState('홍길동');
  const [age, setAge] = useState(20);

  return (
    <div>
      <p>이름: {name}</p>
      <p>나이: {age}</p>
      <button onClick={() => setAge(age + 1)}>나이 +1</button>
    </div>
  );
}

각 상태는 독립적으로 관리되며, 필요에 따라 자유롭게 조작할 수 있습니다.

---

입력값을 상태로 관리하는 폼 예제

폼에서 입력값을 상태로 연결하여 동적으로 처리할 수 있습니다.

function InputForm() {
  const [text, setText] = useState('');

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="이름을 입력하세요"
      />
      <p>입력한 값: {text}</p>
    </div>
  );
}

사용자가 입력한 값을 상태로 관리함으로써, 언제든지 그 값을 읽고 활용할 수 있습니다.

---

마무리

useState는 React 상태 관리의 출발점입니다.
화면이 바뀌는 거의 모든 인터랙션은 상태 변화와 연결되어 있으므로, useState를 제대로 이해하는 것이 React 개발의 기초입니다.