Context API, useReducer

"Reducer를 통해 상태 값 업데이트 && context를 통해 가져오기"

 

1. Context API

리액트의 Context API 를 사용하면, 프로젝트 안에서 전역적으로 사용 할 수 있는 값을 관리 할 수 있다.
이 값은 함수일수도 있고, 어떤 외부 라이브러리 인스턴스일수도 있고 심지어 DOM 일 수도 있다.

2. context 만든는 법

createContext의 파라미터에는 Context의 기본값을 설정할 수 있다.

const UserDispatch = React.createContext(null);

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

<UserDispatch.Provider value = {dispatch}>...</UserDispatch.Provider>
Provider에 의해 감싸진 컴포넌트 중 어디서든지 Context의 값을 다른 곳에서 바로 조회해서 사용가능하다.

 

참고 -> 예시 react-demo project(MaterialUI)

https://react.vlpt.us/mashup-todolist/02-manage-state.html

2. Context API를 활용한 상태 관리 · GitBook

 

 

https://velog.io/@velopert/react-context-tutorial

다른 사람들이 안 알려주는 리액트에서 Context API 잘 쓰는 방법

 위글 : Context API를 사용할 때 값과 업데이트 함수를 두개의 Context로 분리하기 - useReducer 같이 사용(핵심)

3. useReducer

https://react.vlpt.us/basic/20-useReducer.html

20. useReducer 를 사용하여 상태 업데이트 로직 분리하기 · GitBook