복잡한 컴포넌트 트리 구조에서 전역적으로 사용되는 정보가 있을 때 이를 하위-하위-하위… 컴포넌트로 내려 주려면 중간 단계의 컴포넌트들이 불필요하게

자기가 사용하지 않는 props를 단순히 받아 전달해야 하는 문제가 생김

이를 해결해 줄 수 있는 기능이 Context API

hook과 달리 선언하는 곳마다 새로운 상태가 생기는 것이 아니라, 전역으로 상태가 공유됨

사용 예시

1단계: Context API를 이용해 Context 생성

import { createContext } from 'react';

// 다른 파일에서 사용하려면 export
export const MyContext = createContext();

2단계: 생성된 Context를 통해 정보를 관리하는 Provider 선언

const CounterProvider = ({ children }) => {
  const [count, setCount] = useState(0);
  
  return (
    <MyContext.Provider value={{ count, setCount }}>  // 위에서 만든 MyContext 사용
      {children}
    </MyContext.Provider> // .Provider를 붙여야 함
  );
};

3단계: 해당 Provider로 다른 컴포넌트를 감싸는 형태로 사용

function App() {
  return (
    <CounterProvider>  // Provider로 감싸야 함
      <div>
        <CommentSection /> // 몇 단계를 거치든 Provider 아래에 있기만 하면 됨
      </div>
    </CounterProvider>
  );
}
// Provider 태그는 DOM트리에 요소가 생성되지 않음
// 레이아웃 상관 없이 사용 가능

4단계: 정보에 접근해 사용

function CommentSection() {
  const { count, setCount } = useContext(MyContext);  // Context를 import해 사용
  
  return (
    <div>
      <p>현재 count: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}