리액트의 Context API 를 사용하면, 프로젝트 안에서 전역적으로 사용 할 수 있는 값을
관리 할 수 있습니다.
여기서 "상태"가아니라 "값"이라고 말한 이유는, 이 값은 함수 일수도 있고,
외부 라이브러리 인스턴스일수도 있고 심지어 DOM일 수도 있습니다.
자 그럼 사용법을 아주아주 간단하게 정리해보겠습니다.
createContext
우선 Context API를 사용하여 새로운 Context를 만듭니다.
const Context = createContext(iniitailState)createContext의 파라미터에는 Context의 기본값을 설정 할 수 있습니다.
여기서 설정하는 값은 Context를 쓸 때 값을 따로 지정하지 않을 경우 사용되는 기본값입니다.
reducer
reducer 는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태로 반환해주는 함수입니다.
reducer 에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 됩니다.
여기서 action은 업데이트를 위한 정보를 가지고있습니다.
주로 type값을 지닌 객체 형태로 사용합니다.
const reducer = (state,action) => {
switch (action.type){
case 'INCREASE':
return {
...state, // 현재 state가 두개 이상일 경우 변경하지 않은 state를 유지하기 위해 사용
count :action.value// action.value에서 value는 추후 component에서 dispatch 할 때 payload로 보내주는 값의 이름이다.
default:
return state;
}Provider
<Context.Provider value={dispatch}>...</Context.Provider>Context 를 만들면 , Context안에 Provider 라는 컴포넌트가 들어있는데,
이 컴포넌트를 통하여 Context의 값을 정할 수 있습니다.
위 처럼 설정해주고 나면 Provider에 감싸진 컴포넌트 중 어디서든지
우리가 Contextd의 값을 다른 곳에서 바로 조회해서 사용 할 수 있습니다.
useContext
이제 컴포넌트에서 dispatch 를 이용하기위해, useContext라는 Hook을 사용해서
우리가 만든 context를 조회해야합니다.
const Userdata = useContext(UserDispatch)이러면 Userdata 라는 이름으로 context를 조회 할 수 있습니다.
useReducer
const [state, dispatch] = useReducer(reducer, initialState);state는 우리가 앞으로 컴포넌트에서 사용할 수 있는 상태를 가르키게되고,
dispatch 는 액션을 발생시키는 함수라고 이해하시면 됩니다.
useReducer에 넣는 첫번째 파라미터는 reducer 함수이고,
두번째 파라미터는 초기 상태입니다.
dispatch
dispatch({ type: 'INCREMENT' , [key]: [value]}).