useReducer

useState의 대체 함수입니다.

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

사용하는 이유

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

state : 상태데이터 (이를 임의 정의)
dispatch: 액션을 발생시키는 함수 (액션을 보내는곳,연결,전달자)
reducer : 상태분리로의 함수 (이름 임의정의)
initialArg : 초기값

 
기본값
 
const [state, dispatch] = useReducer(reducer, initialArg, init);
 
useReducer(상태 업데이트 로직을 담은 함수, 초기값)
 
이벤트 = dispatch({type: "액션명"}) - dispatch의 타입은 필수
 
액션명 : 별칭 ,별명
        영문 소문자 ,대문자 ,한글 가능 / 하지만 대문자(상수형)로 쓰는게 좋다
 
    dispatch({type: '필수'})
    dispatch({type: '필수', 키1:값})
    dispatch({type: '필수', 키1:값, 키2:값})
 
상태 로직 분리

기본 카운트 함수 구현

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;

구현 영상

useReducer_Timer