[React] Context API

• 특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에게 전달하는 작업
  • 3~4개 이상의 컴포넌트를 거쳐서 전달을 해야한다면?프로젝트 안에서 전역적으로 사용할 수 있는 값을 관리할 수 있다.
    • 여기서 “값”은 상태뿐만 아니라, 함수, 외부 라이브러리 인스턴스, DOM 모두 가능
  • ⇒ 리액트의 Context API와 dispatch를 사용하여 이러한 복잡한 구조를 해결해보자

Context API 만들어보기

React.createContext()

const UserDispatch = React.createContext(null);

• createContext의 파라미터에는 Context의 기본 값을 설정

Context를 만들면, 안에 Provider라는 컴포넌트가 들어있는데, 이것을 통하여 Context의 값을 정할 수 있음

• 이 컴포넌트를 사용할 때, value라는 값을 설정

<UserDispatch.Provider value={dispatch}>...</UserDispatch.Provider>

• 설정 후, Provider에 의하여 감싸진 컴포넌트 중 어디서든지 Context의 값을 다른 곳에서 바로 조회해서 사용할 수 있음

Context API를 사용한 전역 값 관리

---