React - useReducer

이전에는 useState로 상태 업데이트 해줬음

useReducer로도 할 수 있음

 

useState는 setValue(5); 와 설정하고 싶은 다음 상태를 직접 지정해줘서 업데이트함

useReducer는 action이라는 객체를 기반으로 상태를 업데이트 - action객체는 업데이트 할 때 참조하는 객체

type을 통해 지정하거나, 업데이트할 때 필요한 참조할 다른 객체 추가할 수 있음

-> useReduce - 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있음

 

reducer - 상태를 업데이트 하는 함수

이렇게 생김

-> action 객체를 함수로 받아와서 그 상태를 반환

 

useReducer 사용법

파라미터로 reducer함수와 기본값 넣어줌

number 는 현재 상태

dispatch 는 action을 발생시키는 함수

 

코드 작성

- Counter.js -

reducer 함수 만들고

// state에는 문자, 숫자, 함수 뭐든 쓸 수 있음
// action은 type에 따라 다른 상태 반환하도록
function reducer(state, action) {
  switch (action.type){
    case 'INCREAMENT':
      return state + 1;
    case 'DECREAMENT':
      return state - 1;
    default:
      throw new Error('Unhandled action');
  }
}

함수 사용

function Counter(){

  const [number, dispatch] = useReducer(reducer, 0);
  const onIncrease = () => {
    // setNumber(prevNumber => prevNumber + 1);
    dispatch({
      type: 'INCREAMENT'
    });
  }
  const onDecrease = () => {
    // setNumber(number - 1);
    dispatch({
      type: 'DECREAMENT'
    });
  }
  return (

index.js 에서 Counter 컴포넌트 넣어서 확인

잘 실행된다.

 

 

이전 코드

import React, { useState } from 'react';

function Counter(){
  // number 라는 상태를 만들 것인데,
  // 기본값을 0으로 하겠다는 것
  // setNumber는 기존값을 변경하는 값
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }
  const onDecrease = () => {
    setNumber(number - 1);
  }
  return (
    <div>
    <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;