react useReducer 이해하기

TOC

1. useReducer의 작동 흐름
2. 총총

1. useReducer의 작동 흐름

useReducer는 useState의 내용이 복잡해지는 경우 useReducer를 사용하면 된다.

useReducer의 동작 원리
정의 된 선언

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

1. 선언

function Counter(){
const [number,dispatch]=useReducer(reducer,0);
}

위의 number는 값이 저장될 변수이고 dispatch는 state값의 변경이 있을 경우 state 값에 대해 취할 action을 정의하게 된다.

import React, { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
}


function Counter() {
  //   const [number, setNumber] = useState(0);
  const [number, dispatch] = useReducer(reducer, 0);

  const onIncrease = () => {
    // setNumber((prevNumber) => prevNumber + 1);
    dispatch({ type: "INCREMENT" });
  };

  const onDecrease = () => {
    // setNumber((prevNumber) => prevNumber - 1);
    dispatch({ type: "DECREMENT" });
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

-출처 벨로퍼트님의 강의

위 코드를 onClick에서부터 뒤로 따라가 보자

1. onClick->onIncrease 함수를 실행

2. onIncrease함수는 dispatch 함수를 실행하며 인자 type의 값 "INCREMENT"를 넘겨줌

3. const [number, dispatch] = useReducer(reducer, 0);에서
   number=0 즉, 초기값이고
   dispatch는 reducer라는 함수를 실행하게 됩니다.

function reducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
}

reducer의 parameter로 state와 action이 들어가게 되어 있는데 state는 선언한 number 값이 들어가고 action에는 dispatch로 부터 받은 type:"INCREMENT"가 들어가게 됩니다.

정리

선언

const [number, dispatch] = useReducer(reducer, 0);

number=0, dispatch=reducer()를 가리키게 된다.

호출-1

      <button onClick={onIncrease}>+1</button>
      
        const onIncrease = () => {dispatch({ type: "INCREMENT" });
  };

event 발생시 onIncrease함수는 위에서 선언한 dispatch함수에 인자를 넘겨줌

호출-2

function reducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
}

dispatch 함수는 useReducer hook을 사용중인 reducer 함수에 type: "INCREMENT"를 넘겨줌

초기화

function reducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
}

reducer 함수는 이번엔 state, action 순으로 인자를 받고 state값은 넘겨주지 않았지만
(뇌피셜 : useReducer에서 값을 가지고 있으므로 가져다 쓰는 것 같다) state 값과 action을 받는다
action에 따라 정해진 행동을 할 수 있게 switch 문으로 분기를 나누어 준다.

즉 useState의 행동 범위를 따로 묶은 다음 빼놓은 것이라고 보면 될듯 하다.

2. 총총

왜 이렇게 인자를 받는 순서가 섞여있는지는 알지 못하겠다.