React에서의 상태 관리 심화: useState 훅을 사용하여 상태를 여러 컴포넌트에 걸쳐 관리하는 방법

상태 관리의 기본 개념

React에서 상태(state)는 컴포넌트의 동적인 데이터를 다루는 중요한 요소입니다. 상태는 사용자의 입력, 네트워크 응답 및 기타 다양한 이벤트에 따라 변경될 수 있습니다. useState 훅은 함수형 컴포넌트에서 상태를 관리하기 위해 사용됩니다. 기본적인 사용법은 아래와 같습니다:

javascript
import React, { useState } from 'react';

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

  return (
    <div>
      <p>Current count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

위 코드에서 useState(0)은 상태 변수인 count와 상태 변경 함수인 setCount를 반환합니다. 초기 상태로 0을 전달합니다. 버튼을 클릭하면 setCount 함수를 호출하여 상태를 업데이트합니다.

컴포넌트 간 상태 공유의 필요성

단일 컴포넌트에서 상태를 관리하는 것은 간단하지만, 복잡한 애플리케이션에서는 여러 컴포넌트에 상태를 공유할 필요가 있습니다. 이를 위해 상태를 상위 컴포넌트에서 정의하고, 이를 하위 컴포넌트에 props로 전달하는 방식이 일반적입니다.

상태를 상위 컴포넌트에서 관리하기

상위 컴포넌트에서 useState를 사용하고, 하위 컴포넌트에 상태와 상태 변경 함수를 props로 전달할 수 있습니다.

javascript
import React, { useState } from 'react';

function ParentComponent() {
  const [data, setData] = useState('Initial data');

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent data={data} setData={setData} />
    </div>
  );
}

function ChildComponent({ data, setData }) {
  return (
    <div>
      <h2>Child Component</h2>
      <p>{data}</p>
      <button onClick={() => setData('Updated data')}>Update Data</button>
    </div>
  );
}

위 예제에서 ParentComponent는 상태 data를 관리하고, ChildComponent는 이를 props로 받아 사용합니다. 버튼을 클릭하면 상태가 변경되고, 이는 상위 컴포넌트와 하위 컴포넌트에 모두 반영됩니다.

여러 레벨의 상태 전달의 문제점

상태를 props로 전달하는 방식은 간단하지만, 컴포넌트 계층 구조가 깊어질수록 관리가 어려워집니다. 이러한 문제를 해결하기 위해 React에서는 Context API를 제공합니다.

Context를 이용한 상태 관리

Context를 사용하면 컴포넌트 트리에서 깊숙이 있는 모든 컴포넌트에 데이터를 전달할 수 있습니다. Context를 사용하기 위해서는 다음과 같은 단계가 필요합니다:

1. Context 생성
2. 상위 컴포넌트에서 Provider 사용
3. 하위 컴포넌트에서 Context Consumer or useContext 훅 사용

Context 생성

javascript
import React, { createContext, useState } from 'react';

const DataContext = createContext();

Provider 사용

상위 컴포넌트에서 DataContext.Provider를 사용하여 상태와 상태 변경 함수를 전달합니다.

javascript
function ParentComponent() {
  const [data, setData] = useState('Initial data');

  return (
    <DataContext.Provider value={{ data, setData }}>
      <ChildComponent />
    </DataContext.Provider>
  );
}

Consumer or useContext 훅 사용

하위 컴포넌트에서 useContext 훅을 사용하여 상태에 접근할 수 있습니다.

javascript
import React, { useContext } from 'react';

function ChildComponent() {
  const { data, setData } = useContext(DataContext);

  return (
    <div>
      <h2>Child Component</h2>
      <p>{data}</p>
      <button onClick={() => setData('Updated data')}>Update Data</button>
    </div>
  );
}

결론

React에서 상태를 여러 컴포넌트에 걸쳐 관리하는 것은 어려운 작업일 수 있습니다. 그러나 useState 훅과 Context API를 적절히 사용하면 이러한 문제를 효율적으로 해결할 수 있습니다. 기본적인 상태 관리부터 시작해 Context를 사용한 고급 상태 관리까지, 여러분의 애플리케이션 구조에 맞는 상태 관리 방법을 선택하시길 바랍니다.