React - Context API

김종조·2024년 6월 10일

React

Context API

컴포넌트 트리 전체에 걸쳐 전역적인 데이터를 공유하고 전달하기 위한 방법
-> 깊이 중첩된 컴포넌트들 간에도 데이터를 간편하게 전달할 수 있음
-> 보통 props drilling을 피하기 위해 사용

사용 방법

createContext() 함수를 사용하여 context 객체를 생성 할 수 있다.
-> provider와 consumer를 포함

Provider

컨텍스트를 사용하는 컴포넌트들에게 값을 제공하는 역할로, 값을 전달할 (자식)컴포넌트들을 감싸고, 'value'라는 props를 통해 전달할 값을 지정

Consumer

컨텍스트의 값을 사용하는 컴포넌트이다.
최근에는 React에서 useContext 훅을 사용하여 컨텍스트 값을 가져와 사용한다.

예제

ThemeContext (context 객체) 생성

const ThemeContext = createContext();           -> context 객체 생성

ThemeProvider 컴포넌트 생성

const ThemeProvider = ({ children }) => {
  
  const [theme, setTheme] = useState("light");

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

  // ThemeContext.Provider를 통해 '상태 theme' 과 'toggleTheme 함수'를 제공
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export { ThemeContext, ThemeProvider };         -> 내보내기

ThemeToggle 컴포넌트 생성


import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";


const ThemeToggle = () => {

  // useContext Hook을 사용하여 ThemeContext의 값 중 toggleTheme 함수를 가져오기
  const { toggleTheme } = useContext(ThemeContext);

  // 버튼 클릭 시 toggleTheme 함수 호출
  return <button onClick={toggleTheme}>테마 토글</button>;
};

export default ThemeToggle;

ThemeChildComponent 컴포넌트 생성

import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

// 3레벨 자식 컴포넌트 만들기
const ThemeChildComponent = () => {
  const { theme } = useContext(ThemeContext);

  const modeName = theme == "light" ? "라이트" : "다크";
  return <h1>{modeName} 테마 적용중입니다.</h1>;
};

export default ThemeChildComponent;

ThemeComponent 컴포넌트 생성

import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";
import "./css/style.css"; // CSS 파일 임포트
import ThemeChildComponent from "./ThemeChildComponent";

// 현재 테마 상태에 따라 스타일을 적용하고 보여줄 컴포넌트
const ThemeComponent = () => {
  // useContext Hook을 사용하여 ThemeContext의 값 중 theme 상태값 가져오기
  const { theme } = useContext(ThemeContext);

  // 현재 테마에 따라 클래스 이름 설정
  const themeStyle = theme == "light" ? "light-theme" : "dark-theme";

  return (
    <>
      <div className={themeStyle}>현재 {theme} 테마 적용 중 입니다.</div>

      <ThemeChildComponent />
    </>
  );
};

export default ThemeComponent;

css

/* 라이트 테마에 대한 스타일 정의 */
.light-theme {
  width: 100%;
  height: 300px;
  background-color: #fff;
  color: #000;
  padding: 20px;
  text-align: center;
}

/* 다크 테마에 대한 스타일 정의 */
.dark-theme {
  width: 100%;
  height: 300px;
  background-color: #000;
  color: #fff;
  padding: 20px;
  text-align: center;
}

App 컴포넌트

import { ThemeProvider } from "./contextAPI/ThemeContext";
import ThemeToggle from "./contextAPI/ThemeToggle";
import ThemeComponent from "./contextAPI/ThemeComponent";

function App() {
  return (
    <div className="App">
      <ThemeProvider>
        <ThemeToggle />
        <ThemeComponent />
      </ThemeProvider>
    </div>
  );
}

export default App;