현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

Context API

1. Context API란?

Context API는 React에서 컴포넌트 간 전역 데이터를 효율적으로 공유하기 위한 기능이다.
복잡한 구조의 컴포넌트 트리에서 props를 여러 단계에 걸쳐 전달하는 것을 props drilling이라 하는데, 이를 피하기 위해 Context API를 사용한다.

2. 언제 Context API를 사용하는가?

컴포넌트가 깊어질수록 상위에서 하위로 props를 계속 전달하는 것이 번거롭고 유지보수가 어렵다.
Context API를 사용하면 필요한 컴포넌트에서 직접 전역 데이터를 사용할 수 있어 편리하다.

• 로그인 상태 관리가 필요할 때

• 테마(다크/라이트 모드) 설정을 공유할 때

• 언어 설정이 여러 컴포넌트에서 필요할 때

• 사용자 기본 설정 값을 전역적으로 사용할 때

3. 주요 구성 요소

1) createContext 로 전역 상태 만들기

const MyContext = React.createContext();

전역으로 공유할 데이터를 담을 Context를 생성하는 코드이다.
createContext로 Context를 만들고, 데이터를 담을 수 있는 Provider를 설정한다.

2) Provider로 전역 상태 연결

<MyContext.Provider value={공유할_값}>
  <자식_컴포넌트들 />
</MyContext.Provider>

공유할 값을 제공할 범위를 지정하는 역할을 하며, 하위 컴포넌트들이 이 값을 사용할 수 있게 된다.

3) useContext로 전역 상태 가져오기

const value = useContext(MyContext);

Consumer: 하위 컴포넌트에서 useContext를 사용하여 데이터를 접근한다.

예시 코드

const ThemeContext = React.createContext();

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <ThemedButton />;
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>버튼</button>;
}

위 코드는 테마 값을 Context를 통해 전달하고, 버튼 컴포넌트에서 직접 사용하는 예제이다.