React - Context Api

Context Api

Prop drilling(부모 컴포넌트에서 하위 컴포넌트로 전달하는데 양이 많아 질수록 중간 컴포넌트들이 필요없는 내용까지 prop을 받게 되는 현상)

// App.js
export default function App({ theme }) {
  return (
    <>
      <Header theme={theme} />
      <Main theme={theme} />
      <Sidebar theme={theme} />
      <Footer theme={theme} />
    </>
  );
}
function Header({ theme }) {
  return (
    <>
      <User theme={theme} />
      <Login theme={theme} />
      <Menu theme={theme} />
    </>
  );
}

Game 컴포넌트에서 각 게임별 컴포넌트로 prop을 넘겨 주고 있다.

Context 란?

Context API는 리액트에 내장된 기능으로 Props를 사용하지 않아도 특정 값이 필요한 컴포넌트끼리 쉽게 값을 공유할 수 있게 해 준다.
새로운 Context를 만들 때는 createContext 함수를 사용한다.

Context 사용법

Context 는 리액트 패키지에서 createContext 라는 함수를 불러와서 만들 수 있다

import { createContext } from 'react';
const ThemeContext = createContext();
export default function App({ theme }) {
  return (
    // ThemeContext.Provider로 theme 값을 제공
    <ThemeContext.Provider value={theme}>
      <Header />
      <Main />
      <Sidebar />
      <Footer />
    </ThemeContext.Provider>
  );
}
// Header.tsx
function Header() {
  return (
    <>
      <User />
      <Login />
      <Menu />
    </>
  );
}
// User.js
function User() {
  // useContext 훅을 사용하여 theme 값을 가져옴
  const theme = useContext(ThemeContext);
  return <div style={{ color: theme.color }}>User Component</div>;
}
// Login.js
function Login() {
  const theme = useContext(ThemeContext);
  return <div style={{ color: theme.color }}>Login Component</div>;
}
// Menu.js
function Menu() {
  const theme = useContext(ThemeContext);
  return <div style={{ color: theme.color }}>Menu Component</div>;
}

Context 객체 안에는 Provider라는 컴포넌트가 들어있습니다. 그리고, 그 컴포넌트간에 공유하고자 하는 값을 value 라는 Props로 설정하면 자식 컴포넌트들에서 해당 값에 바로 접근을 할 수 있습니다.

function App() {
  return (
    <GameContext.Provider value="롤 할사람?">
      <Game />
    </GameContext.Provider>
  );
}