TIL.useContext와 useReducer함께 사용하기

useContext란?

useContext는 내게 필요한 props를 글로벌하게 사용할 수 있게 해준다.
부모에서 자식으로 그 자식에서 또 다른 자식으로 2중 3중으로 Props를 넘겨 받아야 한다면??
useContext를 사용하는 것이 효율적일 것이다.

const value =useContext(MyContext);

context객체(React.createContext에서 반환된 값)을 받아 그 context의 현재 값을 반환한다.
context의 현재 값은 트리 안에서 이 Hook을 호출하는 컴포넌트에 가장 가까이에 있는 <MyContext.Provider>의 value prop에 의해 결정된다.

useReducer,useContext함께 사용하는 경우

useReducer는 상태를 관리할 때 사용하는 훅이며 특히나 useContext와 같이 사용되는 경우가 많다. 아래는 장바구니를 만들었을 때 useReducer와 useContext를 함께 사용하여 작성한 코드이다.

import React, {createContext,useContext,useReducer} from 'react';
import cartReducer, {
  SORT_BY_DATE,
} from './CartReducer';

const UsercartContext =createContext<CartContext|null>(null);

export const useUserCart=():CartContext =>{
  const usercartContext = useContext(UsercartContext);
  
  ==>UserCartProvider를 생성해준다. 대부분 props로는 children을 받지만 필요에 따라
  얼마든지 추가 가능하다.
  export const UserCartProvider =({children}:{children:React.ReactNode;})=>{
    
    const [state,dispatch]=useReducer(cartReducer,initialState);
    
    const sortByDate=(payload:any) =>{
      dispatch({type:SORT_BY_DATE,payload});
 
      return(
        <UsercartContext.Provider
          value= {{
            sortByDate,dispatch}}
       >
         {children}
       </UsercartContext.Provider>
  )
}

참고 : https://ko-de-dev-green.tistory.com/68