useReducer()

개요

function reducer(state, action) {
  // ...
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, { if or switch });
  // ...

reducer : state를 요구에 따라 업데이트 하는 역할
dispatch : state 업데이트를 위한 요구
action : 요구의 내용

---

활용예제

import React, { useReducer, useState } from "react";

const reducer = (state, action) => {
	
    switch (action.type) {
    	case "deposit" :
        retuen state + action.payload;
        case "withdraw" :
        return state - action.payload;
        default :
        return state;
    }
}

function useReducerHooks() {
  const [money, setMoney] = useState(0);
  const [cash, dispatch] = useReducer(reducer, 0);

  return (
    <div>
      <h2>useReducer 은행에 오신것을 환영합니다.</h2>
      <p>잔고 : {cash}원</p>
      <input
        type="number"
        value={money}
        onChange={(e) => setMoney(parseInt(e.target.value))}
        step="1000"
      />
      <button
        onClick={() => {
          dispatch({ type: "deposit", payload: money });
        }}
      >
        예금
      </button>
      <button
        onClick={() => {
          dispatch({ type: "withdraw", payload: money });
        }}
      >
        출금
      </button>
    </div>
  );
}

위 예제는 1000씩 증가하도록 설정된 input의 value를 money state로 설정해주고 '예금'버튼을 누르면 money에 value만큼 더해주고 '출금'버튼을 누르면 value만큼 빼주는 기능을 하는 버튼이다. 그리고 그 결과값은 cash라는 state에 저장된다.

결론인 cash값을 변경하기 위해 reducer라는 변수를 생성하여 action을 통하여 조건문을 생성. (통상적으론 switch문이 사용됨.)
action.type으로 조건의 유형을 설정하여 input의 value값인 money로 action.payload로 설정하여 그 값을 state인 cash에 동작하게 되어 결과값을 출력하게 된다.

---

적용점

하나의 state를 여러 방법으로 변형 및 상태관리가 필요할 때 주로 사용할 것 같다. 배우면서 느끼는거지만 '어떤식으로 사용하는게 적절할까?' 라는 생각이 자주 떠오른다.
이런 생각들은 직접 프로젝트를 하면서 사용해봐야 정리가 될 것 같다. 공부도 좋지만 당장 사용해보는게 중요할 듯 하다.
또 상태관리라는 말이 자주 나와서 Redux라든가 Recoil과도 작동방식을 비교해보면 조금 더 이해가 쉽지 않을까라는 생각이 든다.

---

참조

• https://react-ko.dev/reference/react/useReducer
  (FE재남과 [React 공식문서 스터디 그룹]의 비공식 한글 번역 사이트 'useReducer')
• https://youtu.be/tdORpiegLg0?si=fZVawcGA0mEyIUoY
  (별코딩 'React Hooks에 취한다' 시리즈)