Context API란?

• Context API는 React version 16부터 사용 가능한 리액트의 내장 API
• 앱에서 컴포넌트에게 props를 사용하지 않고 필요한 데이터(state)를 쉽게 공유할 수 있게 해준다. 따라서 앱의 모든 컴포넌트에서 사용할 수 있는 데이터(state)를 전달할 때 유용

언제 사용할까?

• Context API를 통해 전달하는 데이터 종류
  • 테마 데이터
  • 사용자 데이터
  • 언어 혹은 지역 데이터
• Context API는 자주 업데이트할 필요 없는 데이터에 사용
  • Context API에서 State값을 변경하면, Provider로 감싼 모든 자식 컴포넌트들이 리렌더링 되므로, 전역 상태 관리를 위한 도구가 아닌, 데이터를 쉽게 전달하고 공유하기 위한 목적으로 사용하는 것이 적합
  • 때문에 Context는 리액트에서 컴포넌트를 위한 전역변수의 개념으로 생각하자

사용 방법

context api를 사용하기 위한 네 단계는 다음과 같다.

1. createContext 메서드를 사용해 context를 생성
2. 생성된 context를 가지고 context Provider로 컴포넌트 트리를 감싼다.
3. value prop을 사용해 context Provider에 원하는 값을 입력
4. Provider의 value에 담은 데이터를 전달할 때는 2가지 방식으로 전달 가능.Consumer 혹은 useContext라는 훅을 이용하는것

1. 기본 예제 코드 - Consumer를 사용하는 방법

import { createContext } from ‘react’;

export const themeContext = createContext(전달할 데이터의 초기값);

export default function App() {
  return (
    <themeContext.Provider value={전달할 데이터}>
      <Theme />
    </themeContext.Provider>
  )
}

function Theme() {
  return (
    <themeContext.Consumer>
      {value => <div>{value}</div>}
    </themeContext.Consumer>
  )
}

2. 기본 예제 코드 - useContext Hook을 사용하는 방법

import { createContext, useContext } from ‘react’;

export const themeContext = createContext(전달할 데이터의 초기값);
export default function App() {
  return (
    <themeContext.Provider value={전달 데이터}>
      <Theme />
    </themeContext.Provider>
  )
}

function Theme() {
  const theme = useContext(themeContext);
  return <div>{theme}</div> // Provider에서 value로 전달한 데이터 출력
}