useReducer

기존에 컴포넌트 내부에서 상태 관리 코드를 컴포넌트 외부에서도 할 수 있게 해주는 기능

여러개의 상태, 객체, 로직을 한꺼번에 관리하거나 코드를 분리할 때 많이 쓰게 됩니다.

특징 중 하나는 일반적으로 가독성을 위해 switch 문을 많이 씁니다. (if문 써도 무관)

import { useReducer } from "react";


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


const Exam = () => {
    const [count, dispatch] = useReducer(counterReducer, 0);

    return (
        <div>
        <h1>카운터: {count}</h1>
        <button onClick={() => dispatch({ type: "INCREMENT" })}>+1</button>
        <button onClick={() => dispatch({ type: "DECREMENT" })}>-1</button>
        <button onClick={() => dispatch({ type: "RESET" })}>초기화</button>
        </div>
    );
};

export default Exam;

이렇게 코드를 작성하는데 여기서 dispatch는 상태 (개발자가 지정 가능) 상태에 대한 동작은 내부에 적어주는 방식으로 진행이 된다
if문으로 가능은 하지만..

switch 문이 확실히 가독성이 좋으므로 switch 문을 많이 사용한다.

코드 분리 이외에 Ref로 생성한 키 값을 지운다던가 이전 상태의 업데이트 형식의 경우 리듀서를 많이 사용한다.

단, dispatch 를 전달할 땐 type: "RESET" 과 같이 객체를 전달해야하며,
값을 받을 땐 state +=1(직접적) 이 아닌 return 을 통해 받아야 하며,
또한 useReducer 초기 선언시에 배열인지 number인지 정확하게 명시를 해주어야 한다.