리액트 - useReducer

useReducer

• 액션이라는 객체를 이용해서 업데이트하는 상태 관리 hook
• 컴포넌트 밖으로 상태 업데이트 로직을 분리할 수 있음 보다 복잡한 로직처리가 가능!
• 리액트 문서에 따르면 이전 값이 다음 값에 종속되는 경우가 있으면 선호된다고 나온다
  • 기존의 값이 있고 그 값이 업데이트 되는 경우라면 선호될 것으로 예상된다.

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

const [현재상태, 액션을 발생시키는 함수] = userReducer(reducer, 초기값(기본값) )
reducer : 상태를 업데이트 하는 함수

import React, { useState, useReducer } from 'react';

function reducer(state, action){//state 값은 아무거나 들어올 수있음

  switch(action.type){
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      throw new Error('unhandled error')
  }
}

function Counter() {

  const [number, dispatch] = useReducer(reducer, 0)

  const onIncrease = () => {
    dispatch({
      type:'INCREMENT'
    })
  }
  const onDecrease = () => {
    dispatch({
      type:'DECREMENT'
    })

  }
  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>

    </div>
  )
}

export default Counter;

useReducer vs useState

useState : 설정하고 싶은 다음 상태를 지정해서 업데이트

정해진 답은 없다

컴포넌트에서 관리하는 값이 하나인 경우에는 useState가 편함

관리하는 값이 여러개거나 변동이 많이 일어나는 경우에 useReducer가 편할 수도있음