useReducer에 대해 잘 이해하고 넘어가셨나요? 확실한가요? 진짜? 아니면 한번 들어와 보실래요?? 잠깐 보고가요

 

이런 눈빛으로 들어오셨겠죠??

---

네.

잘 들어오셨어요.

useReducer 설명 갑니다. 

 

useReducer란???

컴포넌트 내부에 새로운 State를 생성하는 React Hook으로 만든 useState는 useReducer로 대처 가능합니다.

 

useState vs useReducer

useReducer를 이용하면 useState와는 달리 상태를 관리하는 코드들을 컴포넌트 외부로 분리할 수 있다는 핵심적인 차이가 있습니다.

React 컴포넌트의 가장 메인 역할은 UI를 렌더링 하는건데 useState를 사용하여 스테이트를 관리하는 코드가 너무 많아지게 되면 코드들이 훨씬 더 복잡하고 길어지게 됩니다. 따라서 App컴포넌트가 렌더링하는 UI요소가 무엇인지 한눈에 파악하기 어렵습니다. 그래서 가독성이 떨어지게 되고 덩달아 유지보수 하기도 굉장히 어려워집니다.

const [state, dispatch] = useReducer();

dispatch: 발송하다, 급송하다

-> 상태 변화가 있어야 한다는 사실을 알리는, 발송하는 함수

컴포넌트 내부에서 dispatch 함수를 호출하게 되면 상태 변화가 요청이 되고 그러면 useReducer가 상태 변화를 실제로 처리하게 될 함수를 호출하게 됩니다. 그 함수는 직접 만들어야 합니다.

import { useReducer } from "react";

// reducer : 변환기
// -> 상태를 실제로 변화시키는 변환기 역할
function reducer(state, action) {
  console.log(state, action);
  if (action.type === "INCREASE") {
    return state + action.data;
  }
}

const Exam = () => {
  // dispatch : 발송하다, 급송하다
  // -> 상태 변화가 있어야 한다는 사실을 알리는, 발송하는 함수
  const [state, dispatch] = useReducer(reducer, 0); // 첫 인수 : 함수, 두 번째 인수 : state의 초기 값

  const onClickPlus = () => {
    // 인수 : 상태가 어떻게 변화되길 원하는지
    // -> dispatch : 액션 객체
    dispatch({
      type: "INCREASE",
      data: 1,
    });
  };

  return (
    <div>
      <h1>{state}</h1>
      <button onClick={onClickPlus}>+</button>
    </div>
  );
};

export default Exam;

위 코드를 보면 button을 누르면 dispatch가 호출이 되고 그러므로써 Reduce 함수가 실행이 되었을 때 이 매개변수 state에는 스테이트의 초기값인 0이 들어가게 되고, 두 번째 매개변수인 action에는 type:'INCREASE', data:1 이러한 액션 객체가 들어오게 됩니다. 그렇게 반환된 값이 새로운 state 값으로 반영이 됩니다.

 

최종 코드

import { useReducer } from "react";

// reducer : 변환기
// -> 상태를 실제로 변화시키는 변환기 역할
function reducer(state, action) {
  switch (action.type) {
    case "INCREASE":
      return state + action.data;
    case "DECREASE":
      return state - action.data;
    default:
      return state;
  }
}

const Exam = () => {
  // dispatch : 발송하다, 급송하다
  // -> 상태 변화가 있어야 한다는 사실을 알리는, 발송하는 함수
  const [state, dispatch] = useReducer(reducer, 0); // 첫 인수 : 함수, 두 번째 인수 : state의 초기 값

  const onClickPlus = () => {
    // 인수 : 상태가 어떻게 변화되길 원하는지
    // -> dispatch : 액션 객체
    dispatch({
      type: "INCREASE",
      data: 1,
    });
  };

  const onClickMinus = () => {
    dispatch({
      type: "DECREASE",
      data: 1,
    });
  };

  return (
    <div>
      <h1>{state}</h1>
      <button onClick={onClickPlus}>+</button>
      <button onClick={onClickMinus}>-</button>
    </div>
  );
};

export default Exam;

 

마무리

복잡한 상태 관리, 예를 들어 폼 상태나 중첩된 데이터 조작 등에서는 useReducer가 훨씬 명확하고 유지보수가 쉬운 선택이 될 수 있습니다. 작은 프로젝트에서는 useState로 충분하지만 상태 전이 로직이 많아지는 순간 useReducer로 전환할 타이밍이라고 생각합니다.

 

사실 이러고 저는 useState 떡칠합니다. useReducer 저도 네. 공부 잘 해서 앱잼때 무기로 들고 가려구요. 다들 파이팅입니다.👍👍😎