[포스코x코딩온] 웹 풀스택 과정 14주차 회고 | React Context

📌 Context API

리액트에 내장된 기능으로, 컴포넌트 트리 전체에 데이터를 공유하는 방법으로, 중간 컴포넌트를 건너뛰고 데이터를 직접 전달할 수 있다.
(모든 단계를 거쳐 props를 전달하지 않고, 트리 전체에 데이터를 공유할 수 있다는 장점이 있지만, 재랜더링과 전역 상태 관리의 복잡성 측면에서 비효율적일 수 있다.)

💡 Context 생성

createContext()

• 초기 값을 받아 context 객체를 생성한다.
• context 값을 위한 Provider와, 그 context에 접근하기 위한 Consumer 두 개의 컴포넌트를 반환한다.

const MyContext = createContext();

💡 Context 값 전달

.Provider

• Context에 값을 제공한다.
• value prop으로 하위 컴포넌트(Consumer)에게 값을 전달한다.
• 일반적으로 context를 생성한 파일에서 Provider까지 함께 관리한다.

export function LangProvider(props) {
  const [language, setLanguage] = useState("Korean");
  return (
    <MyContext.Provider value={{ language, setLanguage }}>
      {props.children}
    </MyContext.Provider>
  );
}

💡 전달받은 Context 값 사용하기

아래의 두가지 방법으로 context 값을 가져올 수 있다. (방법2가 더 간편, 보편적)

방법 1) .Consumer

import MyContext from './store/lang-context';

export default function LangSelector() {
  return (
    <MyContext.Consumer>
      {(value) => (
        <div>
          <h2>현재 선택된 언어: {value.language}</h2>
          <select
            value={value.language}
            onChange={(e) => value.setLanguage(e.target.value)}
          >
            <option value="ko">한국어</option>
            <option value="en">영어</option>
          </select>
        </div>
      )}
    </MyContext.Consumer>
  );
}

방법 2) useContext

import { useContext } from 'react';
import MyContext from './store/lang-context';

// useContext(컨텍스트): 컨텍스트로 전달받는 값을 가져온다.
const value = useContext(MyContext);
return (
  <div>
    <h2>현재 선택된 언어: {value.language}</h2>
    <select
      value={value.language}
      onChange={(e) => value.setLanguage(e.target.value)}
    >
      <option value="ko">한국어</option>
      <option value="en">영어</option>
    </select>
  </div>
);