17. 상태 관리 라이브러리 - 3

Context API를 이용한 간단한 상태 관리 방법

React의 Context API는 컴포넌트 간에 전역적으로 상태를 공유할 수 있는 방법을 제공합니다. 이번 글에서는 Context API를 활용하여 간단한 상태 관리 방법을 소개하겠습니다.

Context API 소개

Context API는 React 애플리케이션에서 전역적으로 상태를 관리하기 위한 방법을 제공합니다. 이를 통해 프로퍼티 체인을 피하고 상태를 직접 전달할 필요 없이 컴포넌트 간에 데이터를 공유할 수 있습니다.

간단한 상태 관리 예제

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

// Context 생성
const ThemeContext = createContext();

// Provider 컴포넌트 정의
const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// Consumer Hook 정의
const useTheme = () => useContext(ThemeContext);

// 테마를 토글하는 버튼 컴포넌트
const ThemeToggleButton = () => {
  const { theme, toggleTheme } = useTheme();

  return (
    <button onClick={toggleTheme}>
      {theme === 'light' ? 'Dark Mode' : 'Light Mode'}
    </button>
  );
};

// App 컴포넌트
const App = () => {
  return (
    <ThemeProvider>
      <div>
        <h1>Theme Toggler</h1>
        <ThemeToggleButton />
      </div>
    </ThemeProvider>
  );
};

export default App;

코드 설명

1. ThemeContext 생성: createContext 함수를 사용하여 테마 관련 데이터를 담을 컨텍스트를 생성합니다.
2. ThemeProvider 구현: 상태를 관리하고 해당 상태와 토글 함수를 하위 컴포넌트에 제공하는 Provider 컴포넌트를 구현합니다.
3. useTheme Custom Hook 정의: useContext 훅을 이용하여 ThemeContext에서 제공하는 값을 손쉽게 사용할 수 있는 커스텀 훅을 정의합니다.
4. 테마 토글 버튼 컴포넌트: useTheme 훅을 사용하여 테마 상태와 토글 함수를 가져와서 버튼을 렌더링합니다.

마무리

Context API를 이용하면 전역적으로 상태를 관리할 수 있는 강력한 도구를 활용할 수 있습니다. 이를 통해 컴포넌트 간에 데이터를 손쉽게 공유하고 상태를 업데이트할 수 있습니다. 위의 예제를 통해 간단하게 상태를 관리하는 방법을 익혔다면, 복잡한 상태 관리에도 적용할 수 있는 기본 개념을 숙지하게 될 것입니다. 계속해서 React의 다양한 기능을 탐구하며 더욱 풍부한 경험을 쌓아보세요!