[React] useReducer 훅 사용하기

🔴 useReducer 사용이유

 useReducer는 상태를 관리하고 업데이트를 하는 훅으로 useState에 비해서 큰 프로젝트에서 대신 사용하는 훅이라고 볼 수 있다. useState와의 가장 큰 차이점은 컴포넌트 외부에 업데이트 로직을 만들어 줌으로써 코드를 최적화 시킨다.

🟠 예제코드

import "./App.css";
import { useReducer } from "react";

const dataHandler = (state, action) => {
  if (action.type === "plus") {
    return { id: action.val, name: "none" };
  }
  if (action.type === "minus") {
    return { id: action.val, name: "none" };
  }
  return { id: 0, name: "none" };
};

function App() {
  const [data, dispatchData] = useReducer(dataHandler, { id: 0, name: "none" });


  function plusHandler() {
    dispatchData({ type: "plus", val: data.id + 1 });
  }

  function minusHandler() {
    dispatchData({ type: "minus", val: data.id - 1 });
  }

  return (
      <>
        <div>{data.id}</div>
        <input type="button" value="+1해주기" onClick={plusHandler} />
        <input type="button" value="-해주기" onClick={minusHandler} />
      </>
  );
}

export default App;

😙 기본구조

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

state는 컴포넌트에서 사용할 상태, dispatch는 reducer함수를 실행시키며 state를 업데이트 해주는 함수이다. reducer는 컴포넌트 외부에서 state를 업데이트하는 로직을 담당하는 함수이고, state와 action 객체를 인자로 받아 대체한다. 마지막으로 initialState는 초기 state를 나타낸다.

저번 시간 예제인 useState를 사용하여 값을 더해주고 빼주는 상태를 관리하는 코드를 useReducer로 바꾸어 보았다. 앞에서 설명했듯이 App컴포넌트 외부에 useReducer에 넣어줄 함수로직이 만들어져 있어 코드가 최적화 되어 있는 것을 확인 할 수 있다.
저번예제링크

😊 뜯어보기

const [data, dispatchData] = useReducer(dataHandler, { id: 0, name: "none" });
//초기값을 { id: 0, name: "none" }로 저장


//reducer함수
const dataHandler = (state, action) => {
  if (action.type === "plus") {
    return { id: action.val, name: "none" };
  }
  if (action.type === "minus") {
    return { id: action.val, name: "none" };
  }
  return { id: 0, name: "none" };
};
// state와 action을 매개변수로 받고 action.type에 따라 state 바꿔주기

  function plusHandler() {
    dispatchData({ type: "plus", val: data.id + 1 });
  }

  function minusHandler() {
    dispatchData({ type: "minus", val: data.id - 1 });
  }

//위의 action.type은 dispatch로 들어온 값으로 판단한다.

👉 후기

상태관리 훅인 useState와 useReducer의 차이점에 대해 알게 되었다. 관리해야할 데이터가 많고 상태의 구조가 복잡해질 것으로 보이는 경우 useReducer를 사용하는 것이 적합하다. 반면 상태가 1개정도이고 객체형태가 아닌 단순한 문자나 숫자일 경우에는 useState사용이 적합해 보인다. 현업에서 많이 사용하는 Redux를 아직 공부하지 않았지만 위의 두가지 훅을 이해하고 사용하게 된다면 금방 학습해 나갈 것 같다.

👍올바른 피드백은 언제든지 환영입니다~!