React 상태 관리의 핵심: useState로 컴포넌트 내부 데이터 다루기

이전 포스트에서는 Vite를 사용해 첫 번째 React 애플리케이션을 성공적으로 생성하고, 정적인 UI 요소를 렌더링하는 방법을 배웠습니다. 하지만 정적인 텍스트만 표시되는 페이지는 사용자와 상호작용할 수 없습니다. 이제부터는 버튼 클릭 시 숫자가 증가하거나, 입력란에 타이핑하면 실시간으로 반응하는 동적인 인터페이스를 만들어보겠습니다.

이러한 동적 행동을 가능하게 하는 핵심 개념이 바로 State(상태)입니다.

State란 무엇인가?

컴포넌트의 State는 그 자체가 관리하는 내부 데이터입니다. 예를 들어, 스위치의 "켜짐/꺼짐" 여부, 카운트 숫자, 폼 입력값 등은 모두 상태로 표현할 수 있습니다. 중요한 점은, 이 상태가 변경되면 React가 자동으로 해당 컴포넌트를 다시 렌더링하여 화면을 최신 상태로 업데이트한다는 것입니다.

즉, 개발자는 "데이터가 어떻게 변해야 하는가"에 집중하면 되고, DOM을 직접 조작하여 UI를 갱신할 필요가 없습니다. 이러한 선언형 프로그래밍 방식이 React의 가장 큰 장점 중 하나입니다.

함수형 컴포넌트에서 상태를 사용하려면?

클래스 기반 컴포넌트에서는 this.state와 this.setState()를 사용했지만, 함수형 컴포넌트에서는 Hook이라는 메커니즘을 통해 상태를 관리합니다. 그중에서도 useState는 가장 기본적이며 자주 사용되는 Hook입니다.

실습: 동작하는 카운터 만들기

이제 useState를 실제로 사용해 보겠습니다. 단계별로 진행해 봅시다.

1단계: 초기 설정

src/App.jsx 파일을 열고 기본 구조를 작성합니다.

import './App.css';

function App() {
  return (
    <div>
      {/* 카운터 UI 추가 */}
    </div>
  );
}

export default App;

2단계: useState 임포트

React에서 제공하는 useState를 먼저 불러와야 합니다.

import { useState } from 'react';
import './App.css';

3단계: 상태 변수 선언

컴포넌트 내부에서 useState를 호출해 현재 값과 갱신 함수를 추출합니다.

function App() {
  const [currentValue, updateValue] = useState(0);

  return (
    <div>
      <h1>카운터 앱</h1>
      <p>현재 값: {currentValue}</p>
      <button onClick={() => updateValue(currentValue + 1)}>
        +1
      </button>
    </div>
  );
}

여기서 주목할 점:

useState(0): 초기 상태 값을 0으로 설정합니다.
const [currentValue, updateValue]: 배열 비구조화 할당을 통해 두 가지 값을 추출합니다.
- currentValue: 현재 상태값 (읽기 전용).
- updateValue: 상태를 변경할 때 사용하는 함수.

4단계: 상태 업데이트 로직 분리 (선택 사항)

이벤트 핸들러가 복잡해질 경우, 별도의 함수로 분리하는 것이 좋습니다.

function App() {
  const [currentValue, updateValue] = useState(0);

  const increment = () => {
    updateValue(currentValue + 1);
  };

  return (
    <div>
      <h1>카운터 앱</h1>
      <p>현재 값: {currentValue}</p>
      <button onClick={increment}>+1</button>
    </div>
  );
}

브라우저에서 확인하면, 버튼을 클릭할 때마다 숫자가 증가하는 것을 확인할 수 있습니다. DOM 조작 코드는 전혀 없지만, 상태 변화에 따라 자동으로 UI가 갱신됩니다.

핵심 원칙 정리

상태는 불변하게 취급: 직접 할당해서는 안 됩니다. 예: currentValue = 5 ❌
갱신 함수 사용 의무: 반드시 updateValue(newValue) 형태로 상태를 변경해야 합니다.
비동기 갱신 고려: 여러 번 연속 호출 시 예측 가능한 결과를 얻으려면 함수형 업데이트 방식을 사용하세요:
```
updateValue(prev => prev + 1);
```

지금까지 컴포넌트가 자신의 데이터를 관리하는 방법을 익혔습니다. 다음 시간에는 부모 컴포넌트가 자식에게 데이터를 전달하는 방법, 즉 props를 다뤄보겠습니다. 이를 통해 컴포넌트 간 통신의 기초를 다질 수 있습니다.

태그: React useState State Management Functional Components Hooks

6월 8일 22:58에 게시됨

괴물 클럽