React.js

[React.js] useReducer

mm_스터디 2024. 6. 24. 11:55
728x90

 

컴포넌트 내부에 새로운 state를 생성하는 react hook 종류 중 하나로

useState를 대체해서 쓸 수 있음

 

그럼 useState와 다른 점이 있는가?

 

→ Yes.    useReducer는 상태 관리 코드를 컴포넌트 외부로 분리 가능 

 

useState는 컴포넌트 내부에 상태 관리 코드들이 계속 추가가 되어 길고 복잡해짐

 

 

https://mm-study-front.tistory.com/43

 

[React.js] React Hooks

클래스 컴포넌트의 기능을 함수 컴포넌트에서 사용할 수 있도록 도와주는 메서드 과거에는 클래스 컴포넌트만 모든 기능을 이용할 수 있었고, 함수 컴포넌트는 UI 랜더링만 가능했었음→  근

mm-study-front.tistory.com

https://mm-study-front.tistory.com/38

 

[React.js] State

사물이 현재 가지고 있는 형태나 모양 사물에 따라 현재 상태는 다르고, 상태를 바꿀 수도 있음 리액트 컴포넌트는  State를 가지고 있음한 컴포넌트에 state를 여러 개 가지고 있을 수도 있음  

mm-study-front.tistory.com

 

우선 

 

import { useReducer } from "react";

 

선언 필요

 

const [state, dispatch] = useReducer(reducer, 초기값);

 

이렇게 써주면 된다

이 때 dispatch는 한국말로 하면 발송하다, 급송하다으로

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

 

 

즉 useReducer 사용하려면

상태 변화를 실제로 처리하는 함수를 만들어야 함

 

이 함수는 컴포넌트 외부에 배치해도 작동함!!

 

 

버튼을 누를 때마다 값이 늘었다가 줄어드는 컴포넌트에 useReducer를 사용한다면

import { useReducer } from "react";
const CountButton = () => {
 
 //상태 변화를 실제로 처리하는 함수
  function reducer(state, action) { 
    console.log(state, action);
    if (action.type === "INCREASE") {
      return state + action.data;
    } else if (action.type === "DECREASE") {
      return state - action.data;
    }
  }

  const [state, dispatch] = useReducer(reducer, 0);

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

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

export default CountButton ;

 

이렇게 완성 위의 코드처럼 if 식들이 길어질 때는 간단하게 switch문을 이용해서 처리하자

 

    switch (action.type) {
      case "INCREASE" : return state + action.data;
      case "DECREASE" : return state - action.data;
      default : state;
    }

 

 

정리해 보면 

useState, useReducer 모두 컴포넌트 내부에 새로운 state를 생성하는 react hook이다

 

그러나 useState는 state를 처리하는 코드를 컴포넌트 내부에 넣어야 하고

useReducer는 state를 처리하는 코드를 컴포넌트 외부에 배치시켜도 된다 그러나!!! 상태가 변환하는 함수를 직접 function을 이용해 선언해주어야 한다

 

 

즉 state 처리가 간단할 때는 컴포넌트 내부에 위치하는 state를 쓰는 게 나을 거 같고

state 처리 코드가 길어지거나 복잡해질 때는 useReducer를 사용해서 컴포넌트 내부에 위치한 코드를 줄이고, if나 switch문을 이용해 처리하자

728x90