[React다루는기술] 18.React Context API

08 Feb 2024 in React on React 다루는 기술

React Context API는 React 애플리케이션에서 전역적으로 상태를 관리하기 위한 기능을 제공한다. 이를 통해 props를 통해 데이터를 여러 컴포넌트에 전달할 필요 없이, 컴포넌트 트리의 깊은 곳에 있는 컴포넌트들도 쉽게 상태를 공유할 수 있다.

React Context API는 기본적으로 Provider와 Consumer로 구성됩니다. Provider는 상태를 제공하고, Consumer는 해당 상태를 구독하여 사용힌다.

1. Context API

React Context API Hook은 함수 컴포넌트에서 React Context를 더 쉽게 사용할 수 있다. 이전에는 클래스 컴포넌트에서만 Context를 사용할 수 있었지만, 이제 함수 컴포넌트에서도 useContext 훅을 사용하여 Context를 손쉽게 활용할 수 있다.

Context 생성: createContext 함수를 사용하여 새로운 Context를 생성
Provider 제공: 생성된 Context를 Provider로 감싸 상태를 제공
Consumer 사용 또는 useContext 훅 사용: 상태를 사용할 컴포넌트에서 Context의 값을 가져옴

color.js

import { createContext } from "react";

//새로운 Context 생성
const ColorContext = createContext({ color: "black" });

export default ColorContext;

App.js

import ColorBox from "./components/ColorBox";
import ColorContext from "./contexts/color";

function App() {
  return (
    //Provider에 value 값을 ColorContext에 전달
    <ColorContext.Provider value=>
      <div>
        <ColorBox />
      </div>
    </ColorContext.Provider>
  );
}

export default App;

ColorBox.js

import ColorContext from "../contexts/color";

const ColorBox = () => {
  return (
    //Cunsumer 사용하기
    <ColorContext.Consumer>
      {(value) => (
        <div
          style=
        ></div>
      )}
    </ColorContext.Consumer>
  );
};

export default ColorBox;

2. useContext Hook 예제

useContext Hook을 사용해서 테마를 변경하는 예제이다.

App.js

import React from "react";
import { ThemeProvider } from "./contexts/ThemeContext";
import Header from "./components/Header";
import Content from "./components/Content";

const App = () => {
  return (
    <ThemeProvider>
      <Header />
      <Content />
    </ThemeProvider>
  );
};

export default App;

ThemeContext.js

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

// createContext 함수로 새로운 Context를 생성합니다.
const ThemeContext = createContext();

// 테마를 제공하는 Provider 컴포넌트를 정의합니다.
export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState("light");

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
  };

  // Provider 컴포넌트는 createContext로 생성한 Context의 Provider입니다.
  // value prop을 통해 하위 컴포넌트들에 상태를 전달합니다.
  return (
    <ThemeContext.Provider value=>
      {children}
    </ThemeContext.Provider>
  );
};

// useContext 훅을 사용하여 Context의 값을 가져올 수 있습니다.
export const useTheme = () => (ThemeContext);

Header.js

import React from "react";
import { useTheme } from "../contexts/ThemeContext";

const Header = () => {
  const { theme, toggleTheme } = useTheme();

  return (
    <header
      style=
    >
      <button onClick={toggleTheme}>Toggle Theme</button>
      <h1>{theme === "light" ? "Light Theme" : "Dark Theme"}</h1>
    </header>
  );
};

export default Header;

Content.js

import React from "react";
import { useTheme } from "../contexts/ThemeContext";

const Content = () => {
  const { theme } = useTheme();

  return (
    <div style=>
      <p>{theme === "light" ? "Light content" : "Dark content"}</p>
    </div>
  );
};

export default Content;

리액트를 다루는 기술(개정판)