리액트 전역 상태 관리: useContext 훅

React는 컴포넌트 기반의 라이브러리로, 컴포넌트 간의 데이터 전달은 일반적으로 props를 통해 이루어집니다.

하지만 중첩된 컴포넌트 구조에서 여러 단계를 거쳐 데이터를 전달하는 것은 비효율적이고 복잡할 수 있습니다.

이를 해결하기 위해 React는 Context API를 제공합니다.

useContext란?

useContext는 React에서 Context 객체를 가져와서 사용할 수 있게 해주는 훅입니다. Context는 전역적으로 데이터를 공유할 수 있게 해주는 메커니즘으로, 특정 트리 구조의 하위 컴포넌트에 데이터를 직접 전달하지 않고도 접근할 수 있게 합니다.

useContext의 사용 방법

useContext를 사용하려면 먼저 Context 객체를 생성해야 합니다. 그런 다음, 이 Context를 사용하는 컴포넌트를 Context.Provider로 감싸서 데이터를 제공하고, 하위 컴포넌트에서 useContext를 통해 이 데이터를 쉽게 사용할 수 있습니다.

예제 코드

useContext를 활용하여 다크 모드 토글 기능을 구현해 보겠습니다.

 

1. DarkModeContext 생성하기

먼저, 다크 모드 상태를 관리하기 위해 DarkModeContext를 생성합니다. DarkModeContext는 애플리케이션의 전역 상태를 관리하는 역할을 합니다.

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

// Context 생성
export const DarkModeContext = createContext();

 

2. DarkModeProvider 컴포넌트 작성하기

DarkModeProvider는 애플리케이션에서 다크 모드와 관련된 상태를 관리하고, 이 상태를 하위 컴포넌트들에 공유하는 역할을 합니다. DarkModeProvider 컴포넌트는 DarkModeContext.Provider를 통해 상태와 함수를 하위 컴포넌트에 전달하는데, 이때 value 속성을 사용합니다.

export function DarkModeProvider({ children }) {
  const [darkMode, setDarkMode] = useState(false);

  const toggleDarkMode = () => { setDarkMode((mode) => !mode) };

  return (
    <DarkModeContext.Provider value={{ darkMode, toggleDarkMode }}>
      {children}
    </DarkModeContext.Provider>
  );
}

value 속성은 객체로 정의되어 있으며, 이 객체에 포함된 darkMode와 toggleDarkMode는 DarkModeProvider로 감싸진 모든 하위 컴포넌트에서 접근할 수 있습니다.

 

3. useDarkMode 커스텀 훅 만들기

전역적으로 관리되는 다크 모드 상태를 쉽게 사용할 수 있도록, useDarkMode라는 커스텀 훅을 작성합니다.

export function useDarkMode() {
  const context = useContext(DarkModeContext);
  if (!context) {
    throw new Error('useDarkMode훅은 DarkModeProvider 내에서 사용해야 합니다.');
  }
  return context;
}

• useDarkMode 훅은 DarkModeContext에 접근하여, 현재 다크 모드 상태와 상태를 토글하는 함수를 반환합니다.
• DarkModeProvider 내에서만 사용되도록 안전장치를 추가했습니다.

4. 실제 사용 예시

이제 DarkModeProvider와 useDarkMode를 활용하여 다크 모드 토글 기능을 구현해보겠습니다.

import React from 'react';
import { DarkModeProvider, useDarkMode } from './DarkModeContext';

function DarkModeToggleButton() {
  const { darkMode, toggleDarkMode } = useDarkMode();

  return (
    <button onClick={toggleDarkMode}>
      {darkMode ? '라이트 모드로 전환' : '다크 모드로 전환'}
    </button>
  );
}

function App() {
  return (
    <DarkModeProvider initialMode={false}>
      <div
        style={{
          backgroundColor: darkMode ? '#333' : '#FFF',
          color: darkMode ? '#FFF' : '#000',
          minHeight: '100vh',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <DarkModeToggleButton />
      </div>
    </DarkModeProvider>
  );
}

export default App;