4 React의 상태 관리: useState 훅으로 상태 변경과 렌더링 흐름 이해하기

 React에서 상태 관리(State management)는 UI가 어떻게 변화하는지를 제어하는 중요한 개념입니다. 컴포넌트 내에서 데이터를 다루는 방법은 매우 다양하지만, 가장 기본적이고 중요한 방법은 바로 useState 훅을 사용하는 것입니다. 이번 글에서는 useState 훅을 통해 상태를 관리하는 방법과, 상태 변경과 렌더링 흐름에 대해 쉽게 설명드리겠습니다.

1. 상태 관리란 무엇인가요?

React에서는 컴포넌트가 데이터를 가지고, 이 데이터를 화면에 표시합니다. 이때 화면에 표시되는 내용은 상태(State)라고 하며, 사용자의 입력이나 다른 이벤트에 따라 상태가 변할 수 있습니다. 상태는 컴포넌트 내부에서 관리하며, 상태가 변경되면 React는 변경된 상태를 반영하여 UI를 다시 렌더링합니다.

2. useState 훅으로 상태 관리하기

React에서 상태를 관리하려면 useState 훅을 사용합니다. useState는 상태 값을 저장하고, 상태를 변경하는 함수도 제공합니다. useState는 함수형 컴포넌트에서만 사용할 수 있습니다.

기본 사용법

import React, { useState } from 'react';

function Counter() {
  // useState로 상태 선언
  const [count, setCount] = useState(0);

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

export default Counter;

위 예제에서 useState(0)는 count라는 상태 변수를 선언하고, 초기값을 0으로 설정합니다. setCount는 count의 값을 변경하는 함수입니다. 버튼을 클릭할 때마다 setCount를 호출하여 count 값을 1 증가시키고, 변경된 값은 화면에 자동으로 렌더링됩니다.

3. 상태 변경과 렌더링 흐름

상태가 변경되면 React는 UI를 다시 렌더링합니다. React는 상태 변경을 감지하고, 해당 상태가 사용되는 부분만 다시 렌더링하여 성능을 최적화합니다. 이 과정에서 중요한 점은 상태 변경은 비동기적이라는 것입니다.

상태 변경이 비동기적인 이유

React는 상태 변경을 큐에 쌓고, 그 후에 한 번에 처리합니다. 그래서 여러 번 상태를 변경할 경우, 마지막 상태 값만 반영될 수 있습니다. 예를 들어, 아래 코드를 보면 두 번의 setCount 호출이 비동기적으로 처리되는 것을 알 수 있습니다.

import React, { useState } from 'react';

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

  const increaseCount = () => {
    setCount(count + 1);
    setCount(count + 1);
  };

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={increaseCount}>카운트 두 번 증가</button>
    </div>
  );
}

export default Counter;

위 코드에서 버튼을 클릭하면 setCount(count + 1)이 두 번 호출되지만, 실제로는 count 값이 한 번만 증가할 수 있습니다. 이는 상태 변경이 비동기적으로 처리되기 때문입니다. 따라서 setCount가 호출될 때, count의 최신 값을 반영하지 못합니다.

이 문제를 해결하려면, 상태 변경을 이전 상태를 바탕으로 처리할 수 있도록 해야 합니다. React는 상태를 이전 상태를 기반으로 업데이트할 수 있는 방법을 제공합니다.

이전 상태 기반으로 상태 업데이트하기

const increaseCount = () => {
  setCount(prevCount => prevCount + 1);
  setCount(prevCount => prevCount + 1);
};

이 방식은 prevCount를 사용하여 항상 최신 상태값을 기반으로 업데이트되기 때문에 두 번의 setCount 호출이 모두 count를 2만큼 증가시킬 수 있습니다.

4. 상태 관리의 중요성

React에서 상태 관리는 UI의 흐름을 제어하는 핵심입니다. 사용자가 버튼을 클릭하거나 입력 값을 변경할 때, 상태가 변경되면 화면이 업데이트됩니다. 이를 통해 사용자 경험을 향상시키고, UI의 일관성을 유지할 수 있습니다. useState 훅을 잘 활용하면 상태 관리가 간편하고 직관적으로 이루어지며, 더욱 효율적인 개발이 가능합니다.

5. 결론

이번 글에서는 React의 상태 관리 개념과 useState 훅을 사용하는 방법에 대해 알아보았습니다. 상태 변경이 렌더링에 미치는 영향과 비동기적인 상태 변경 흐름을 이해하는 것이 중요합니다. 이를 통해 React 애플리케이션에서 상태를 효율적으로 관리하고, 사용자에게 빠르고 일관된 UI를 제공할 수 있습니다.

React에서 상태 관리는 필수적인 개념이므로, 기본적인 useState 사용법을 잘 익혀두고, 다양한 상황에서 이를 활용해보세요.