[React.js] useReducer

카테고리 : Development
태그: development · reactjs · useReducer · state · action
등록일: 2023년 03월 29일
최근 업데이트: 2023년 03월 29일

---

• useReducer

useReducer

useState의 대체 함수입니다.

(state, action) => newState의 형태로 reducer를 받고 (필수) dispatch 메서드와 짝의 형태로 현재 state를 반환합니다.

사용하는 이유

• 다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우
• state가 이전 state에 의존적인 경우에 보통 useState보다 useReducer를 선호
• useReducer는 자세한 업데이트를 트리거 하는 컴포넌트의 성능을 최적화할 수 있게 하는데, 이것은 콜백 대신 dispatch를 전달 할 수 있기 때문

1. state : 상태데이터 (이를 임의 정의)

2. dispatch: 액션을 발생시키는 함수 (액션을 보내는곳,연결,전달자)

3. reducer : 상태분리로의 함수 (이름 임의정의)

4. initialArg : 초기값

기본값

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

useReducer(상태 업데이트 로직을 담은 함수, 초기값)

이벤트 = dispatch({type: "액션명"}) - dispatch의 타입은 필수

액션명 : 별칭 ,별명
        영문 소문자 ,대문자 ,한글 가능 / 하지만 대문자(상수형)로 쓰는게 좋다

    dispatch({type: '필수'})
    dispatch({type: '필수', 키1:값})
    dispatch({type: '필수', 키1:값, 키2:값})

상태 로직 분리

1. 기본 카운트 함수 구현

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

//초기값

const initialState = 0;

//분리

const reducer = (state, action) => {
  switch (action.type) {
    case "INCREMENT":
      return state + action.step;
    case "DECREMENT":
      return state - action.step;
    case "RESET":
      return 0;
    default:
      return state;
  }
};

const Test1_step = () => {
  //연결
  const [count, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <h1>카운트 : {count}</h1>
      <p>
        <button onClick={() => dispatch({ type: "INCREMENT", step: 10 })}>
          10씩 증가 : INCREMENT
        </button>
        <button onClick={() => dispatch({ type: "DECREMENT", step: 20 })}>
          20씩 감소 : DECREMENT
        </button>
        <button onClick={() => dispatch({ type: "RESET" })}>
          초기화 : RESET
        </button>
      </p>
    </div>
  );
};

export default Test1_step;

1. 구현 영상

---