Context API를 이용한 전역 값 관리

| Context API 란 ?

ContextAPI는** "징검다리"** 같은 역할을 해줍니다.

특정 함수를 특정 컴포넌트를 거쳐 원하는 컴포넌트에게 전달하는 작업은 리액트로 개발하다보면 자주 발생하는데요,

Componet 1개 정도는 큰 불편함이 없지만, 여러개의 컴포넌트를 거쳐 전달하게 된다면 어떻게 될까요?

이럴경우에 Context API를 사용하여 전달하면 매우 편리하게 전역으로 전달할 수 있습니다.

| Context API 사용

React.createContext(null);

 

Context를 생성할때는 다음과 같이 React.createContext() 를 사용하여 만듭니다.
파라미터값으로는 Context의 기본값이 되며, Context의 value값을 찾을 수 없을 때 기본값이 사용됩니다.

기본적으로, Context를 만들면 Provider 라는 컴포넌트가 들어있습니다.
해당 컴포넌트를 통하여 Context 의 값을 설정할 수 있습니다.
값을 설정할 경우 value 값을 통하여 설정해줍니다.

 

 

| Provider value 값 할당

<Example.Provider value={dispatch}>
    <User />                //value    값 User에서 공유 !
</Example.Provider>

위와 같이 설정 후 Provider 안에서 값을 공유할 컴포넌트를 명시해주면 됩니다.

 

 

useContext

useContext() 라는 Hook을 사용하여 앞에서 전달해주는 값들은 사용할 수 있습니다.

const useContext = useContext("사용한 Context 값");


위와 같이 Context를 활용하여 useReducer의 dispatch와 함께 적절하게 사용한다면 코드 가독성도 높아집니다 ~!