react useContext 사용

useContext를 사용해보겠다.

일단 context파일을 만들고 ThemeContext.tsx파일을 만들어주겠다.

import { createContext, useState, ReactNode } from 'react';
export interface ThemeContextType {
  isDark: boolean;
  setIsDark: React.Dispatch<React.SetStateAction<boolean>>;
}
const defaultContextValue: ThemeContextType = {
  isDark: false,
  setIsDark: () => {},
};
export const ThemeContext =
  createContext<ThemeContextType>(defaultContextValue);
const ThemeProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [isDark, setIsDark] = useState<boolean>(false);

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

export default ThemeProvider;

isDark,setIsDark를 사용하여 하위 컴포넌트에게 넘겨주기 위해 ThemeContext함수를 만들어서 createContex에 useState처럼 기본값을 넣어줬다.

ThemeProvider를 만들어서 ThemeContext.Provider를 반환하여 ThemeContext를 통해 자식 컴포넌트들에게 상태와 함수를 제공하도록 구현한다.

value={{ isDark, setIsDark }}는 ThemeContext.Provider에 제공할 값을 설정했다.

{children}은 ThemeProvider가 감싸고 있는 자식 컴포넌트들이다.

최상위 컴포넌트

import { useState } from 'react';
import './App.css';
import Page from './components/Page';
import { ThemeContext } from './context/ThemeContext';

const App = () => {
  const [isDark, setIsDark] = useState(false);

  return (
    <>
      {/* Page 컴포넌트를 contextProvider로 감싸주기 */}
      <ThemeContext.Provider value={{ isDark, setIsDark }}>
        <Page />
      </ThemeContext.Provider>
    </>
  );
};
export default App;

부모인 App에서 만들어둔 ThemeContext.provieder에 value로 공유할 prop들을 넣어서
자식을 감싸준다.

하위 컴포넌트

import { useContext } from 'react';
import { ThemeContext } from '../context/ThemeContext';
import { ThemeContextType } from '../context/ThemeContext';
const Header = () => {
  const { isDark } = useContext<ThemeContextType>(ThemeContext);
  return (
    <header
      className="headr"
      style={{
        backgroundColor: isDark ? 'balck' : 'lightgray',
        color: isDark ? 'white' : 'black',
      }}
    >
      <h1>Welcome! </h1>
    </header>
  );
};
export default Header;

사용할 prop을 변수처럼 할당하고 useContext에 만들어둔 ThemeContext를 지정한다.
이건 즉 ThemeContext에서 isDark를 가져온다는 뜻이다.

그리고 isDark가 필요한 부분에 넣어서 사용해주면 된다!!!

전체 코드 링크텍스트