Context 란?

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.

일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 (예를 들면 선호 로케일, UI 테마) 이 과정이 번거로울 수 있습니다.

context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있습니다.

 

context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다.

 

아래 코드를 보면,

1. createContext로 Contex를 만들어줍니다.

2. Context의 Provider(울타리)를 만들어줍니다. 

    이제 다른 곳에서 Provider로 감싸주면 Provider 안에 있는 value 값을 사용할 수 있게 됩니다.

    <DarkModeContext.Provider value={{ darkMode, toggleDarkMode }}></DarkModeContext.Provider>

3. Context를 사용하기 위해 useContext 를 실행시켜 줄 함수를 하나 만들어줍니다.

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

const DarkModeContext = createContext();

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

  useEffect(() => {
    const isDark = 
      localStorage.theme === 'dark' ||
      (!('theme' in localStorage) &&
        window.matchMedia('(prefers-color-scheme: dark)').matches);
        setDarkMode(isDark);
        updateDarkMode(isDark);
  }, []);

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

function updateDarkMode(darkMode) {
  if (darkMode) {
    document.documentElement.classList.add('dark');
    localStorage.theme = 'dark';
  } else {
    document.documentElement.classList.remove('dark');
    localStorage.theme = 'light';
  }
}

export const useDarkMode = () => useContext(DarkModeContext);

 

 

 

아래와 같이 Provider(울타리)로 감싸준 컴포넌트 범위 내에서 Contex의 value 값을 사용할 수 있게 됩니다. (DarkModeProvider)

import './App.css';
import Header from './components/Header/Header';
import TodoList from './components/TodoList/TodoList';
import { useState } from 'react';
import { DarkModeProvider } from './context/DarkModeContext';

const filters = ['all', 'active', 'completed'];

function App() {
  const [filter, setFilter] = useState(filters[0]);
  return (
    <DarkModeProvider>
      <Header filters={filters} onChangeFilter={setFilter} />
      <TodoList filter={filter} />
    </DarkModeProvider>
  );
}

export default App;

 

 

 

그리고 아래와 같이 컴포넌트에서 Context의 value를 사용합니다. (useDarkMode)

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

export default function Header({ filters, onChangeFilter }) {
  const { darkMode, toggleDarkMode } = useDarkMode();
  return (
    <header>
      <button onClick={toggleDarkMode}>
        {!darkMode && '다크'}
        {darkMode && '라이트'}
      </button>
      {
        filters.map((item, index) => <button key={index} onClick={() => onChangeFilter(item)}>{item}</button>)
      }
    </header>
  );
}