1. Context API를 쓰는 이유

기존 react의 상태관리 ⇒ 컴포넌트에 데이터를 전달해야 하는 경우에는 여러 컴포넌트를 거쳐 연달아서 Props를 설정해주어야 하기 때문에 불편함

(Props Drilling)

이 때 Context API를 사용하면 props drilling을 방지할 수 있음

컨텍스트(context)는 관계있는 컴포넌트간 prop 을 공유할 수 있게 해주고, 프롭 드릴다운 이펙트(prop drill down effect)에 대한 방어수단으로 사용할 수 있다.

하지만 오해하지 말아야할게 있는데,

Context는 상태관리 도구가 아니다. ContextAPI는 단지 종속성 주입의 한 형태일뿐 아무것도 관리하지 않는다. 상태관리는 일반적으로 useState와 useReducer를 통해 일어난다. 즉, Context를 단순히 "리액트 컴포넌트에서 Props가 아닌 또 다른 방식으로 컴포넌트간에 값을 전달하는 방법이다" 라고 접근을 하는 것이 좋다.

2. Context API 사용방법

Context는 react 패키지에서 createContext라는 함수를 불러와서 만든다. Context 객체 안에는 Provider라는 컴포넌트가 들어있다. 그리고, 그 컴포넌트간에 공유하고자 하는 값을 value라는 Props로 설정하면 자식 컴포넌트들에서 해당 값에 바로 접근을 할 수 있다.

각 컴포넌트들에게 Props를 설정해주는 것이 아니라, 각 컴포넌트에서 원하는 값을 useContext로 가져오는 방식으로 바뀌었다.

components/Parents.js

import React from "react";
import { createContext, useContext } from "react";
import Child from "./Child";

// custom hook
export function useMyContext() {
  return useContext(MyContext);
}

const MyContext = createContext("default value");
// provider 컴포넌트로 감싸는 것을 깜빡하면 'default value'가 나온다.

const Parents = () => {
  return (
    <div>
      <MyContext.Provider value="Hello World">
        <Child />
      </MyContext.Provider>
    </div>
  );
};

export default Parents;