[React.js] Context API를 이용하여 전역 상태 관리하기

Context API를 이용하여 전역 상태 관리하기

들어가며

• 리액트(React.js)에서 Context API를 이용하여 전역 상태 관리하는 방법을 정리해본다.
• Context API를 이용하면 따로 패키지를 설치하지 않고도 전역 상태를 관리할 수 있다.

 

Context API

개념

• 컴포넌트 트리에서 전역 상태를 보다 쉽게 공유할 수 있는 기능을 제공하는 API
• 이 방법을 이용하면, 프롭 드릴링(Props Drilling)을 피할 수 있다.

 

방법

① context 파일 생성하기

• 전역으로 사용할 상태를 정의하는 @Context.js@ 파일을 생성한다.

 

./src/context.js

import { createContext, useContext, useState } from 'react';

// (1) Context 생성하기
const AppContext = createContext();

export const AppProvider = ({ children }) => {
  // (2) 상태 변수 및 상태 변경 함수 설정하기
  const [value, setValue] = useState('초기값');

  return (
    // (3) Context.Provider를 이용하여 하위 컴포넌트에 상태 전달하기
    <AppContext.Provider value={{ value, setValue }}>
      {children}
    </AppContext.Provider>
  );
};

// (*) 커스텀 훅 만들기
export const useGlobalContext = () => useContext(AppContext);

export default AppProvider;

 

프로젝트의 모든 컴포넌트에서 접근해서 사용할 수 있게 할 대상들을 객체(Object) 형태로 <AppContext.Provider>의 value 속성의 값으로 지정해준다. 

 

② Context Provider로 최상위 컴포넌트 감싸기

• 전역 상태를 적용시킬 최상위 컴포넌트를 Context Provider로 감싸준다.
  • @main.jsx@ (또는 @index.js@) 파일

 

./src/main.jsx (index.js)

import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';

import AppProvider from './context/context.jsx';

// 최상의 컴포넌트를 감싸준다.
createRoot(document.getElementById('root')).render(
  <AppProvider>
    <App />
  </AppProvider>
);

 

③ 하위 컴포넌트에서 상태 사용하기

• 하위 컴포넌트에서 (위에서 미리 생성한 커스텀 훅인) @useGlobalContext@ 훅을 불러와 사용한다.

 

./src/components/MyComponent.jsx

import { useGlobalContext } from './context'; 

const MyComponent = () => {
  const { value, setValue } = useGlobalContext();

  return (
    <div>
      <h1>전역 상태 값: {value}</h1>
      <button onClick={() => setValue('hi')}>값 변경</button>
    </div>
  );
};

export default MyComponent;

 

• 커스텀 훅을 사용하지 않을 경우, 다음과 같이 사용한다.

import { useContext } from 'react';

import { AppContext } from '../context';

const MyComponent = () => {
  const { value, setValue } = useContext(AppContext);

  return (
    <div>
      <h1>전역 상태 값: {value}</h1>
      <button onClick={() => setValue('hi')}>값 변경</button>
    </div>
  );
};

export default MyComponent;

 

동작 방식

• @AppContext@는 @value@와 @setValue@의 상태를 @AppContext.Provider@를 통해 전달한다.
• @MyComponent@는 @useContext@를 사용하여 전역 상태인 @value@에 접근하고, @setValue@를 통해 상태를 업데이트 할 수 있다.

 

장단점

장점

• 별도의 라이브러리 없이 리액트의 내장 기능으로 상대적으로 간단하게 전역 상태를 관리할 수 있다.
• 리덕스(Redux)나 MobX 같은 외부 전역 상태 관리 라이브러리보다 간단하게 사용할 수 있다.
• 상태나 테마, 언어 설정 등 다양한 데이터를 쉽게 공유할 수 있어 다양한 전역 상태 관리 시나리오에 적용할 수 있다.
• 필요한 데이터와 로직을 여러 컴포넌트에서 사용할 수 있도록 중앙 집중화하여 코드 중복을 줄이고 구조를 개선한다.
• 작은 규모의 애플리케이션에서는 Context API가 비교적 가볍고, 상태 관리에 필요한 학습 곡선이 낮다.

 

단점

• Context API는 상태가 변경될 때, 해당 Context를 구독하고 있는 모든 컴포넌트가 리렌더링된다.
  • 따라서 대규모 애플리케이션에서는 성능 문제가 발생할 수 있다.
  • 리렌더링 최적화가 중요한 경우 문제가 될 수 있다.
• 간단한 전역 상태를 관리하기에는 충분하지만, 복잡한 상태 관리나 상태 업데이트 로직이 필요한 경우 불편할 수 있다.
• Redux DevTools 같은 디버깅 도구가 제공되지 않아 디버깅 및 상태 추적의 어려움이 있을 수 있다.
• 다수의 Context를 사용하게 되면, 컴포넌트 트리가 중첩되어 가독성이 떨어지고 관리가 어려워질 수 있다.
  • 여러 Context를 동시에 사용해야 하는 경우 코드가 복잡해질 수 있다.
• 여러 개의 Context.Provider를 중첩해서 사용해야 할 때, 코드가 복잡해지고 관리가 어려워질 수 있다.

 

사용하기 좋을 경우

• 작은 규모의 프로젝트나 상태 공유가 간단한 프로젝트에서 사용하기에 적합하다.
• 테마, 다국어 설정, 인증 정보 와 같은 전역 설정을 공유하는 데 적합하다.
• 상태 변화가 빈번하거나 애플리케이션 규모가 커짐에 따라 더 정교한 상태 관리가 필요할 경우 리덕스(Redux), MobX 등 외부 전역 상태 관리 라이브러리를 사용하는 것이 좋다.

 

참고 사이트

useContext – React

createContext – React