[포스코x코딩온] React- Context API / createContext

React - Context API

Context

• Context API는 React의 내장 기능(즉, 따로 설치할 필요가 없다.)
• 컴포넌트 트리 전체에 걸쳐 데이터를 공유하는 방법
• 일반적으로 React에서 데이터를 전달하려면 부모에서 자식으로 props를 통해 전달
• Context API를 사용하면 중간 컴포넌트들을 건너뛰고 데이터를 직접 전달할 수 있다.

https://react.dev/reference/react/createContext

createContext – React

사용 이유

• 아래와 같이 컴포넌트 수가 많은 대형 프로젝트에서는 props를 많이 써야 하는 경우가 발생하기에 이러한 경우에 Context를 사용하면 props를 한번만 할당해도 된다.

즉, 애플리케이션 전체에 데이터가 필요하거나, 여러 컴포넌트들에 반복적으로 데이터가 전달이 되던가, 전역적으로 액세스가 필요한 데이터인 경우 사용을 한다.

---

CreateContext

// 1번. import React from 'react';

// 2번
import { createContext } from "react";

// 1번. const MyContext = React.createContext();

//2번
//Context 생성
//Provider와 Consumer 두 개의 리액트 컴포넌트를 반환
const MyContext = createContext({
  language: "ko",
  setLanguage: () => {},
  //이 부분은 없어도 된다. 단순히 기본 설정을 알려주는 것 뿐이다.
  //Consumer에서 편하게 사용할 수 있다.
});

export default MyContext;

• createContext(): 초기 값을 받아 컨텍스트 객체를 생성
• 이 함수는 현재의 context 값을 위한 Provider와 그 context에 접근하기 위한 Consumer 두 개의 리액트 컴포넌트를 반환한다.

---

Provider

import MyContext from "./store/lang-context";
import { useState } from "react";

export default function LanguageProvider(props) {
  const [language, setLanguage] = useState("ko");

  return (
    <MyContext.Provider
      value={{ language: language, setLanguage: setLanguage }}
    >
      {props.children}
    </MyContext.Provider>
  );
}

• Context에 값을 제공한다.
• value prop을 사용하여 값을 전달하고 Provider에 의해 제공된 값은 하위 컴포넌트들이 사용할 수 있다.

---

Consumer / useContext

• Context의 값을 사용하는 두가지의 방법

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

export default function LanguageSelector() {
  //첫번째 방법 Consumer 이용
  //   return (
  //     <MyContext.Consumer>
  //       {(value) => {
  //         return (
  //           <div>
  //             <h2>현재 선택된 언어: {value.language}</h2>
  //             <select
  //               value={value.language}
  //               onChange={(e) => value.setLanguage(e.target.value)}
  //             >
  //               <option value="ko">한글</option>
  //               <option value="jp">일어</option>
  //               <option value="en">영어</option>
  //             </select>
  //           </div>
  //         );
  //       }}
  //     </MyContext.Consumer>
  //   );

  //두번째 방법 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="jp">일어</option>
        <option value="en">영어</option>
      </select>
    </div>
  );
}

---

App.js

• 이렇게 불러와서 사용하면 된다.

      <LanguageProvider>
        <LanguageSelector />
      </LanguageProvider>

---

※ 주의

• 재렌더링의 문제: 하나의 컨텍스트에 여러 데이터를 저장할 경우, 컨텍스트의 어떤 부분이 변경되더라도 해당 컨텍스트를 사용하는 모든 컴포넌트들이 재렌더링이 된다. 이는 비효율적일 수 있다.
• 중첩된 프로바이더: 서로 다른 값을 여러 레벨의 컴포넌트에 제공하려면 Provider를 중첩해서 사용해야 하는 경우가 발생할 수 있다. 이는 코드의 복잡도를 증가 시킨다.
• 전역 상태 관리의 복잡성: 복잡한 애플리케이션에서 전역 상태 관리를 단순히 Context API만으로 처리하려고 하면, 상태 업데이트 로직이 복잡해질 수 있다. 이는 Redux로 해결할 수 있다.