[React]useReducer

리액트에서 State 관리를 효율적으로 하기위해 사용하는 hook인 useReducer에 대해서 정리하겠습니다.

useReducer는 전달인자로 reduer라는 함수와 state의 초기값을 전달 받습니다. 그리고 state와 dispatch 함수를 리턴합니다.

const [count, dispatch) = useReducer(reducer, 0);

전달되는 reducer 함수는 현재 state와 action이라는 객체를 전달인자로 받습니다. action 객체는 type이라는 속성을 필수적으로 가지며, 필요에 따라 추가적인 속성값을 부여할 수 있습니다.

reducer 함수는 if문이나 switch문을 사용하여 전달 받은 action에 따라 변경된 state값을 리턴합니다.

import { useReducer } from "react";

export default function App() {
  const [count, dispatch] = useReducer(reducer, 1);

  const plus = () => {
    dispatch({ type: "PLUS" });
  };

  const minus = () => {
    dispatch({ type: "MINUS" });
  };

  function reducer(state, action) {
    if (action.type === "PLUS") {
      return state + 1;
    }
    if (action.type === "MINUS") {
      return state - 1;
    }
  }

  return (
    <div className="App">
      <h1>{count}</h1>
      <button onClick={plus}> Click </button>
      <button onClick={minus}> Click </button>
    </div>
  );
}

동작순서(D -> R -> S)

dipatch 함수 호출 -> reducer 함수 호출 -> state 변경

1. 버튼 클릭 시 plus 함수 호출
2. plus 함수가 action 객체를 전달받아 dispatch 함수를 호출
3. reducer 함수가 호출 되면서 변경된 state값 리턴
4. 리턴된 state 값이 count에 할당

처음 useRedcuer를 사용할 때는 복잡해 보였지만 여러번 작성을 하다보니 효율적으로 state값을 변경할 수 있고 코드 유지보수에도 효과적이라는 사실을 알게 되었습니다.

또한, 상태 관리 라이브러리인 'Redux' 에서는 Store 객체가 useReducer와 같은 형태로 사용됩니다. 프로젝트가 커지고 관리해야할 state 값이 많아질 경우 상태관리 라이브러리를 사용하여 보다 가독성 좋은 코드를 작성해야 겠습니다.