React_useReducer 상태관리

🤔 제가 useReducer 훅을 이해하기 위해 작성한 글 임니다,,

useReducer

공식 문서를 확인하면 “useReducer은 컴포넌트에 reducer을 추가하는 리액트의 훅” 이렇게 정의하고 있다.
useReducer를 사용하는 목적은 서로 관련이 있는 여러 상태를 하나의 객체로 묶고, 하나의 함수(reducer) 안에서 어떻게 바뀔지를 정리해 상태 업데이트를 관리하기 위해서이다. 강의에서 useState에서 useReducer 모두 상태를 관리하는 훅을 변경하는데 그렇다면 언제 useState를 쓰고, 언제 useReducer로 상태를 관리하는지 기준이 어떻게 될까 궁금했다.

useState, useReducer 사용 기준

먼저 useState와 useReducer 동일한 방식이기 때문에 언제나 마음대로 바꿔서 사용해도 무방하며 같은 컴포넌트 안에서 섞어서도 사용할 수 있다고 한다.

기준	useReducer	useState
상태 수	상태가 여러개이고 복잡할 때	상태가 1~2개로 단순할 때
상태 간 관계	상태 값들이 서로 영향을 주고받거나, 한 액션이 여러 상태를 동시에 바꿔야 할 때	각 상태가 독립적일 때

좀 더 복잡한 상태이거나 여러 상태들끼리 연관 되어있을 때 setState를 여러 번 나눠서 호출하는 것보다 useReducer로 묶어서 관리하는 게 더 깔끔하고 유지 보수가 쉽다는 장점이 있어 상황에 따라 선택해 사용하면 될 것 같다.

🔗 useState 와 useReducer 비교하기

🤔 그런데 컴포넌트에 reducer을 추가한다는 게 무슨 말인지 와닿지 않았다.

useReducer 에서의 reducer 란?

reducer는 현재 상태(state)와 액션(action)을 인수로 받아 새로운 상태를 반환한다.
상태를 어떻게 바꿔야 할지를 정의해두고 action이 발생했을 때 해당 action을 실행해 새로운 상태를 리턴하는 함수라고 생각하면 될 것 같다. 리액트는 reducer가 반환한 새 상태를 기반으로 다음 state 값을 설정하고 컴포넌트를 재렌더링 한다.

import { useReducer } from "react";
//해당 함수가 실행될 때마다 컴포넌트 안의 함수들이 재생성되도록 하지 않기 위해서 컴포넌트 밖에 생성한다.
//reducer는 state, action만 인자로 받기 때문에 컴포넌트 함수 안에서 정의되거나 업데이트되는 어떤 값에도 직접 접근할 필요가 없다.
function reducer(state, action) {
  //state: useReducer로 관리되는 상태의 보장된 최신 상태 스냅샷
  // ...
}

action : 사용자가 어떤 행동을 했는지를 나타내는 값으로 모든 타입이 될 수 있지만 보통 객체를 사용
예를 들어 더하기 버튼 클릭 → “숫자에 1 더해줘, 빼기 버튼 클릭 → “숫자에 1 빼줘”

//일반적인 action의 구성
{
  type: "increment", // 어떤 행동인지 알려주는 문자열
  payload: 2, // 추가 데이터 (옵션)
}

payload 언제 사용해야할까?

action을 처리할 때, 값이 필요한 경우 payload를 사용한다.
예를 들어 할 일을 추가한다면 새로운 배열에 값을 추가할 때 사용자가 입력한 값이 필요할 때

function reducer(state, action) {
  if (action.type === "ADD_TODO") {
    return {
      ...state,
      todos: [...state.todos, action.payload],
    };
  }
  //...
}
dispatch({
  type: "ADD_TODO",
  payload: { id: 1, text: "할 일 추가하기" },
});

reducer 를 작성할때 지켜야 하는 규칙

• 오직 state와 action 에만 의존하고, “상태를 어떻게 바꿀지” 만 정의해야 한다.
• reducer는 불변성을 지켜 객체/배열을 수정해야 한다.
• reducer는 독립적으로 테스트하거나 재사용이 가능하도록 컴포넌트 외부로 분리 가능한 순수 함수여야 한다 (reducer 함수 안에서 props, ref, useState, useEffect 와 같은 컴포넌트 안쪽의 것들을 사용하면 안 된다)
• 각 action은 데이터 안에서 여러 변경들이 있더라도 하나의 사용자 상호작용을 설명해야 한다.
  (예를 들어, 사용자가 할 일 추가하기 라는 버튼을 클릭하면 → todos 배열에 새로운 todo 추가, input값 초기화, input focus 이렇게 변경되는 데이터가 여러개여도 하나의 액션으로 묶어서 처리)

* 순수 함수(Pure Function) : 같은 입력을 주면 항상 같은 결과를 반환하고(예측이 가능하고), 외부 상태나 sideEffect에 의존하지 않는 함수
* 사이드 이펙트(Side-effect) : 함수가 자신의 일 외에 컴포넌트 밖에 영향을 주는 일을 하는 것

dispatch 함수

useReducer(reducer, initialArg, init?)
//참고: init이 있으면 initialArg를 바로 state로 쓰지 않고, init을 한 번 실행해서 그 결과를 초기 상태로 사용한다.

useReducer에 의해 반환되는 dispatch 함수는 유일한 인수인 액션(action)을 reducer 함수에 전달하는 함수이다.

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  // ...
}

useReducer 사용 예시

import { useReducer } from "react";

function reducer(state, action) {
  //현재 상태와 사용자 액션을 전달받음
  switch (
    action.type //reducer에서 정의해놓은 액션들
  ) {
    case "increment":
      return { count: state.count + 1 }; //업데이트 된 상태를 반환
    case "decrement":
      return { count: state.count - 1 };
    default:
      return state;
  }
}
export default function CounterContextProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <>
      <button
        onClick={() => {
          //dispach 함수를 통해 reducer 함수에 action “사용자가 방금 한 일” 전달
          dispatch({ type: "increment" });
        }}
      >
        Increment count
      </button>
      <button
        onClick={() => {
          dispatch({ type: "decrement" });
        }}
      >
        Increment count
      </button>
      <p>current count: {state.count}</p>
    </>
  );
}

🔗 React_useReducer