[React] Context API로 전역 상태 관리하기

MinJae·2024년 10월 26일

목록 보기

17/21

리액트에서 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 데이터를 전달하는 과정에서 Props drilling이 발생하는데 이를 해결하기 위한 방법 중 Context를 사용하여 해결하는 방법을 알아보겠습니다.

Context API란?

리액트에서 전역 상태를 관리하기 위한 내장 기능입니다. 여러 컴포넌트에서 공통으로 사용하는 데이터를 Props dilling 없이 손쉽게 전달할 수 있도록 도와줍니다. 주로 상위 컴포넌트에서 하위 컴포넌트로 값을 직접 전달할 필요 없이, 컴포넌트 트리 어디서든 데이터를 접근할 수 있습니다.

Context API를 언제 사용할까?

Context API는 props driling이 복잡하거나 비효율적일 때 사용합니다.
대표적인 사용 예시는 테마, 인증상태, 다국어 지원 등 여러 컴포넌트에서 동일한 데이터를 필요로 할 때 효과적입니다.

Context API 사용 방법

1. createContext로 전역 상태 만들기

먼저 createContext 함수를 이용해 Context를 생성하여 전역 상태를 준비합니다. createContext는 초기값을 받아서 전역 상태의 기본값을 정의할 수 있습니다.

import { createContext } from 'react';

// Context 생성
export const MyContext = createContext(null);

2. Provider로 전역 상태 연결

Provider는 Context의 데이터를 하위 컴포넌트에 전달하는 역할을 합니다. Provider 컴포넌트는 value라는 prop을 사용하여 공유할 데이터를 설정합니다. Provider로 감싼 하위 컴포넌트들은 모두 value에 접근할 수 있습니다.

import { useState } from 'react';
import { MyContext } from './MyContext';

const MyProvider = ({ children }) => {
  const [state, setState] = useState('Hello Context!');

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

export default MyProvider;

3. useContext로 전역 상태 가져오기

seContext를 사용하여 하위 컴포넌트에서 Context의 전역 상태에 쉽게 접근할 수 있습니다. useContext는 Context 객체를 인수로 받아 해당 Context의 value를 반환합니다.

import { useContext } from 'react';
import { MyContext } from './MyContext';

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

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState('Context Updated!')}>
        Update Context
      </button>
    </div>
  );
};