React Context API: 컴포넌트 간 상태 관리 간소화.

작성일 : 2024-07-02

React Context API: 컴포넌트 간 상태 관리 간소화

Context API의 개념

React는 컴포넌트 기반 아키텍처로 설계되어 있어, 데이터가 계층 구조의 상위에서 하위로 전파되는 방식으로 작동합니다. 그러나 매우 복잡한 애플리케이션에서는 데이터나 상태를 여러 레벨의 컴포넌트에 전달해야 하는 경우가 자주 발생합니다. 이러한 경우, 일일이 props를 통해 데이터를 전달하는 것은 관리가 어렵고 코드를 복잡하게 만듭니다. 이 문제를 해결하기 위해 React에서는 Context API를 도입했습니다. Context API는 전역적 상태를 쉽게 관리하고 계층 구조를 통해 데이터를 효율적으로 공유할 수 있게 합니다.

Context API 사용법

Context API를 사용하는 기본적인 절차는 다음과 같습니다:

Context 생성
Provider 컴포넌트를 통해 데이터 제공
Consumer 컴포넌트를 통해 데이터 소비

자세히 살펴보겠습니다.

1. Context 생성

먼저 createContext 함수를 이용해 새로운 Context를 생성합니다.


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

const MyContext = createContext();

여기서 MyContext는 우리가 전역적으로 공유할 데이터의 컨텍스트입니다.

2. Provider 컴포넌트를 통해 데이터 제공

Provider 컴포넌트는 Context에서 데이터를 다루는 역할을 합니다. Provider는 React 트리 내의 하위 컴포넌트에게 데이터를 공급합니다.


javascript
function MyProvider({ children }) {
  const [state, setState] = React.useState("initial state");

  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
}

여기서 state와 setState는 MyContext를 통해 하위 컴포넌트에게 전달됩니다. children은 Provider 컴포넌트의 모든 자식 컴포넌트를 나타냅니다.

3. Consumer 컴포넌트를 통해 데이터 소비

데이터를 소비하기 위해 우리는 useContext 훅을 사용할 수 있습니다. 이 훅은 Context 객체를 받아 그 값에 접근할 수 있게 해줍니다.


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

function MyComponent() {
  const { state, setState } = useContext(MyContext);

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState("new state")}>Change State</button>
    </div>
  );
}

이렇게 하면 MyComponent는 MyContext에서 제공된 데이터를 소비할 수 있습니다.

사용 예제

간단한 예제로 전체 과정을 설명하겠습니다. 여기서는 사용자 이름을 전역적으로 관리하도록 하겠습니다.

Context 생성:


javascript
const UserContext = createContext();

Provider 컴포넌트 작성:


javascript
function UserProvider({ children }) {
  const [user, setUser] = React.useState("Guest");

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

데이터를 소비하는 컴포넌트 작성:


javascript
function User() {
  const { user, setUser } = useContext(UserContext);

  return (
    <div>
      <p>User: {user}</p>
      <button onClick={() => setUser("John Doe")}>Login as John Doe</button>
    </div>
  );
}

App 컴포넌트에서 Provider 적용:


javascript
function App() {
  return (
    <UserProvider>
      <div>
        <h1>Welcome to the User App</h1>
        <User />
      </div>
    </UserProvider>
  );
}

이 코드를 통해, User 컴포넌트는 UserContext를 통해 상태를 받아와서 사용할 수 있습니다. 이 경우 전역적으로 관리되는 사용자 이름 상태를 다양한 컴포넌트에서 쉽게 접근하고 수정할 수 있게 됩니다.

Context API의 장점

명확성: 데이터가 어디서 오는지 명확하게 알 수 있습니다.
코드 간결성: props 체이닝을 줄여 코드가 간결해집니다.
유연성: 전역 상태를 관리하고 다양한 컴포넌트에서 쉽게 접근할 수 있습니다.

결론

React Context API는 컴포넌트 간 상태 관리에 있어 매우 유용한 도구입니다. 단순한 글로벌 상태 관리는 물론, 복잡한 데이터 구조에 대해서도 명확하고 효율적으로 접근할 수 있게 도와줍니다. 이 글에서 다룬 개념과 예제를 통해 Context API를 쉽게 이해하고, 실용성 있는 상태 관리를 구현해 보세요.