TIL.useReducer에 대해 알아보자

보통 상태관리를 할 때, context api와 useReducer를 함께 쓰는 경우가 많다.
그래서 useReducer 개념에 대해 더 알아보고자 정리를 해본다..!

useReducer란?

useRedcuer Hook은 react가 상태관리를 위한 reducer function에 접근할 수 있게 해준다.
useState Hook과 매우 비슷한데, 차이점이라면 useReducer는 좀 더 복잡한 로직과 상태관리에서 사용되는 경우가 많다.

useReducer는 일반적으로 2개의 argument(reducer함수, initialState(초기값))를 갖는다.

 const [state,dispatch]=useReducer(reducer,initialState)

👋🏻 useReducer에 대해 알아보기 전에, reducer function에 대해 알아보자.
reducer는 state,action을 가지고 값을 리턴하는 함수이다.

function reducer (state,action) {
return state + action;
}

여기서 action은 state의 값이 어떻게 변하는지 결정한다. 위 코드를 보면 state의 새로운 값은 초기 state와 action값의 총합이라고 볼 수 있다.

그렇다면 여기서 궁금점이 생길 것이다. useReducer로 어떻게 action을 전달할 수 있는가?

바로 dispatch function으로 그것이 가능하다!
dispatch function은 state를 업데이트되게 action을 dispatch한다.

🤜 이제 본격적으로 useReducer에 대해 알아보자.
1. initialState를 0으로 설정한다.
2. reducer 함수를 작성해준다. action type에 따라 더하고 빼고 상태를 리셋을 해준다.
3. useReducer Hook을 초기화해준다.
4. 버튼에 dispatch함수를 추가해준다.

1. const initialState=0;
2. function reducer(state,action) {
  switch(action.type){
    case "increment":
      return state+1;
    case "decrement":
      return state-1;
    case "reset":
      return 0;
    default:
      throw new Error();
      
 fucntion App(){
   3.
   const [state,dispatch]=useReducer(reducer,initialState);
   
   return (
     <div>
     <h1> Count:{state}</h1>
     4.
      <button onClick={()=>dispatch({type:"decrement"})}> -</button>
   <button onClick={()=>dispatch({type:"increment"})}> +</button> 
<button onClick={()=>dispatch({type:"reset"})}> Reset</button>

👍 꼭 알아두어야 할 점!

1. Local 'store'

리덕스에서는 어느 컴포넌트에서도 접근할 수 있는 centralized된 store가 있다.
그러나 useReducer는 컴포넌트안에서만 데이터를 저장한다.

2.Reducers are pure

리듀서함수는 pure function이다. 이 의미는 만약 같은 arguments가 전달되고 side effects가 없다면 무조건 함수는 같은 값을 리턴한다는 의미이다.

3.Lazy Initialization

useReducer는 선택적으로 3번째 argument (init)를 가질 수 있다.
init은 initialState와 init(initialArg)함께 저장하는 함수이다.
아래와 같이 initialState에 init function을 사용할 수 있다.

function init(initialState){
  return initialState;
}

그리고 type이 'reset'인 곳에서 initial 값의 상태를 set해주기 위해 reducer함수를 수정해줄 수 있다.

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return state + 1;
    case "decrement":
      return state - 1;
    case "reset":
      return init(action.payload); //used init instead of hard code as 0
    default:
      return;
  }
}

useReducer함수는 아래와 같이 수정된다.

function App() {
  //3번째 argument로 init을 추가해준다.
  const [state, dispatch] = useReducer(reducer, initialState, init);

  return (
    <div>
      <h1> Count: {state}</h1>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <!--payload:initialState로 추가해준다.-->
      <button onClick={() => 
        dispatch({ type: "reset", payload: initialState})}>Reset</button>
    </div>
  );
}

너무나 깔끔하게 설명이 잘되어있는 아래의 블로그를 참고했다!
참고 :https://lo-victoria.com/a-look-at-react-hooks-usereducer