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

출처 - 벨로퍼트

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

 

Context API와 dispatch를 사용하면 3~4개 이상의 컴포넌트를 거쳐서 전달해야하는 복잡한 구조를 해결할 수 있다.

const UserDispatch = React.createContext(null);

createContext 의 파라미터에는 Context의 기본값을 설정할 수 있다. : Context를 쓸 때 따로 지정하지 않을 경우 사용되는 기본값

Context를 만들면, Context 안에 Provider라는 컴포넌트가 들어있는데 이 컴포넌트를 통하여 Context의 값을 정할 수 있다. 이 컴포넌트를 사용할 때 value 라는 값을 설정해주면 된다.

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

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

 

⇒ UserDispatch 라는 Context를 만들어서, 어디서든지 dispatch 를 꺼내쓸 수 있도록 함