[리액트] Context API

특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에게 전달하는 작업은 빈번히 발생하는 데,

만약 3~4개 이상의 컴포넌트를 거친다면 매우 번거로운 일이다ㅣ.

 

이를 해결하는 방법은 Context API와 dispatch를 함께 사용하는 것이다.

 

Context API

- 프로젝트 안에서 전역적으로 사용 할 수 있는 값을 관리 할 수 있음.

- 여기서 값은 상태, 함수, 외부 라이브러리 인스턴스, DOM 일 수 있음.

 

//Context를 만들 때
const UserDispatch = React.createContext(null);

/*
createContext 의 파라미터에는 Context 의 기본값을 설정.
여기서 설정하는 값은 Context 를 쓸 때 값을 따로 지정하지 않을 경우 사용되는 기본 값
*/

//ontext 안에 Provider 라는 컴포넌트가 들어있어서,
//이 컴포넌트를 통하여 Context 의 값을 정할 수 있고, value 라는 값을 설정해주면 된다.
<UserDispatch.Provider value={dispatch}>...</UserDispatch.Provider>

/*
이렇게 설정해주고 나면 
Provider 에 의하여 감싸진 컴포넌트 중 어디서든지 
우리가 Context 의 값을 다른 곳에서 바로 조회해서 사용 할 수 있다.
*/

출처

https://react.vlpt.us/basic/22-context-dispatch.html

22. Context API 를 사용한 전역 값 관리 · GitBook