useReducer

useReducer(reducer, initialArg, init?)

• reducer
• state가 업데이트 되는 방식을 지정하는 reducer함수입니다.
• state와 action을 인자로 받아야하고 다음 state를 반환해야합니다.

• initialArg
• 초기 state가 계산되는 값입니다.

• optional init
• 초기 state 계산 방법을 지정하는 초기화 함수입니다.

주의사항

dispatch function

• action
• 사용자가 수행한 작업입니다.
• 관용적으로는 액션은 보통 이를 식별하는 type 속성이 있는 객체이며, 선택적으로 추가 정보가 있는 다른 속성을 포함할 수 있습니다.

주의사항

• dispatch 함수는 다음 렌더링에 대한 state 변수만 업데이트합니다.

• React는 컴포넌트와 그 자식들을 다시 렌더링하는 것을 건너뜁니다.

import { useReducer } from 'react';

function reducer(state, action) {
  if (action.type === 'incremented_age') {
    return {
      age: state.age + 1
    };
  }
  throw Error('Unknown action.');
}

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, { age: 42 });

  return (
    <>
      <button onClick={() => {
        dispatch({ type: 'incremented_age' })
      }}>
        Increment age
      </button>
      <p>Hello! You are {state.age}.</p>
    </>
  );
}

함정

state는 읽기 전용입니다. state의 객체나 배열을 수정하지 마세요

function reducer(state, action) {
  switch (action.type) {
    case 'incremented_age': {
      // 🚩 Don't mutate an object in state like this:
      state.age = state.age + 1;
      return state;
    }

function reducer(state, action) {
  switch (action.type) {
    case 'incremented_age': {
      // ✅ Instead, return a new object
      return {
        ...state,
        age: state.age + 1
      };
    }