Context API

• 컴포넌트 트리의 깊이(depth)에 관계없이 props를 전달하지 않고도 컴포넌트가 전역 데이터에 접근할 수 있다.
• context는 전역 데이터를 관리하는 데 사용됨
• 이때 전역적으로 관리하고자 하는 것은 단순히 '상태(값)'뿐만 아니라 함수나 다른 외부 라이브러리 인스턴스, DOM일 수도 있다.

Context API는 리액트 자체적으로 제공해주는 애라 특별히 라이브러리 설치 등이 필요없다는 장점이 있다.
반면, context를 사용하면 컴포넌트를 재사용하기가 어려워지므로 꼭 필요할 때만 쓰라는 리액트 공식문서의 입장이 있었다.
선택은 개발자의 몫... 😎

---

Context 생성

createContext()

createContext() 라는 함수를 사용하여 context 객체를 만든다.

import { createContext } from 'react';
const MyContext = createContext(defaultValue);

defaultValue은 필수는 아니고 Provider가 없는 경우에만 사용된다.
null 또는 빈 값으로 해도 됨.

그럼 Provider는 뭐냐?

Provider

Context 객체 안에는 Provider라는 컴포넌트가 들어있다. 그리고, 그 컴포넌트간에 공유하고자 하는 값을 value 라는 Props로 설정하면 자식 컴포넌트들에서 해당 값에 바로 접근할 수 있다.

function App() {
  return (
    <MyContext.Provider value="Hello World">
      <GrandParent />
    </MyContext.Provider>
  );
}

그럼 이제 GrandParent 컴포넌트는 Hello World 라는 값에 접근할 수 있다.

근데 그냥 바로 value 를 갖다 쓸 수 있는건 아니고 useContext 라는 훅을 사용해야 한다.

useContext()

import { useContext } from 'react';
const value = useContext(MyContext);

인수로 아까 만들어놓은 context 객체를 넣어주면 된다.
그러면 아까 MyContext 객체에 넣어놓은 value 를 사용할 수 있다.