[React] useReducer

최근 온라인 강의 사이트인 Udemy에서 할인행사를 통해 리액트 강의를 구입해서 진행중이다.

 

관련 깃 : https://github.com/kijung7942/react-practice

 

아직 너무나 기초단계만을 진행중에 있으나, 포스팅할만한 주제가 생겨 글을 적어보려한다.

 

React에 대해서 잘 모르는 사람이라더라도 useState에 대해서는 어느정도 들어봤고 알기 쉬울 것 같다.

 

상태관리라는 패러다임을 통해서 SPA가 가능하도록 하는 리액트에서 주로 사용하는 React Hook인데, 이를 보다 강력하고 복잡한 상태관리를 할 수 있도록 해주는 것이 useReducer이다.

 

예를들어 useState 를 이용해 3개의 서로 관련된 상태를 관리하고 있다고 가정해보자.

import { useState } from 'react'

const myComponent = () => {
  const [name, setName] = useState("");
  const [grade, setGrade] = useState(0);
  const [clazz, setClazz] = useState("");

  const clickHandler = (grade) => {
    setName('ssombba');
    setGrade(grade);

    let clazz = grade > 90 ? 'A' 
    :grade > 80 ? 'B' 
    :'C' 

    setClazz(clazz);
  };

  return (
    <div>
      <p>이름 : {name}</p>
      <p>점수 : {grade}</p>
      <p>반 : {clazz}</p>
      <button onClick={clickHandler.bind(null, 90)}>바꾸기</button>
    </div>
  );
}

 

이름과 점수와 반에 대한 데이터를 가진 상태들을 관리한다고 보았을 때, 이렇게 세개의 서로 다른 상태를 useState를 이용해서 관리할 수 있다.

 

하지만 이를 조금 더 깔끔하게 유지하기 위해서 useReducer를 사용할 수도 있다.

const initialState = {
  name: "",
  grade: 0,
  clazz: "",
};

const reduceFn = (state, action) => {
  if (action.type === "NAME") {
    return { ...state, name: action.value };
  }

  if (action.type === "GRADE") {
    return { ...state, grade: action.value };
  }

  if (action.type === "CLASS") {
    return state.grade > 90
      ? { ...state, clazz: "A" }
      : state.grade > 80
      ? { ...state, clazz: "B" }
      : { ...state, clazz: "C" };
  }
};

const [state, dispatch] = useReducer(reduceFn, initialState);

  const clickHandler = () => {
    dispatch({ type: "NAME", value: "ssombba" });
    dispatch({ type: "GRADE", value: 100 });
    dispatch({ type: "CLASS" });
  };

  return (
    <div>
      <p>이름 : {state.name}</p>
      <p>점수 : {state.grade}</p>
      <p>반 : {state.clazz}</p>
      <button onClick={clickHandler}>바꾸기</button>
    </div>
  );

 

useReducer를 이용해서 관리를 하면 복잡한 로직을 가진 함수를 컴포넌트가 랜더링 될 때마다 새로운 함수를 만들지 않아도 된다는 장점도 가지고 있고 로직을 분리해서 관리하므로 유지보수성에서도 유리한 면이 있다.