useReducer

컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있는 hook
-> 컴포넌트 바깥에서 작성가능 (다른 파일에 작성 후 불러오기)

function reducer(state, action){
  //새로운 상태를 만드는 로직
 switch (action.type) {
    case "INCREMENT":
      return state + 1
    case "DECREMENT":
      return state - 1
    default:
      return state
  }
}

reducer : 현재 상태(state)와 액션 객체(action)를 파라미터로 받아와 새로운 상태를 반환해주는 함수
action : 업데이트를 위한 정보. 주로 type값을 지닌 객체 형태로 사용 (ex {type : "INCREAMENT"})

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

state : 컴포넌트에서 사용할 수 있는 상태값
dispatch : 액션을 발생시키는 함수

실행 순서

import React, { useReducer } from "react"

// 1. 상태를 변경하는 reducer 함수를 작성
function reducer(state, action) {
  // state는 바뀔 현재 상태값.
  // 보통 객체 형식을 띄고 있어 여러 state 값들을 한번에 바꿔줘야하는 경우 사용
  switch (action.type) {
    case "INCREMENT":
      return state + 1
    case "DECREMENT":
      return state - 1
    default:
      return state
  }
  // 작성한 action의 타입에 따라 state를 원하는 형태로 바꿔 새로운 state를 리턴
  // ❗️새로운 값이기 때문에 객체를 변형시키는 경우, 원본 데이터를 변형시키지 않도록 유의하기
}

function Counter() {
  // number : 최근 state
  // dispatch : 타입과 파라미터를 전달하기 위한 함수
  // 0 : number의 초기값
  const [number, dispatch] = useReducer(reducer, 0)

  const onIncrease = () => {
    // dispatch의 파라미터는 한개로 제한되어 있기 때문에 여러 정보를 전달하기 위해 객체 사용
    dispatch({ type: "INCREMENT" })
    // 만약 원하는 크기대로 INCREMENT를 하고 싶다면 해당 argument를 다음과 같이 변경
    // dispatch( {type : "INCREMENT" , plus : 5 })
    // 그런 다음 reducer함수에서 state + 1이 아닌 state + action.plus로 변경
  }

  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
컴포넌트에서 관리하는 값이 여러개 -> useReducer

권장사항일뿐 이래야한다 하는 건 없음