useReducer

Reducer

useReducer 훅

• 로컬 상태를 정의할 때 사용
• useState와 비슷
  ✨ use State
  로컬 상태를 정의하기 위한 훅
  장점: 간단함
  단점: 상태가 업데이트 되는 것을 예측 불가
  const [상태 (state), 상태 업데이트 함수 (setState)] = useState (초깃값);
  ✨ 리듀서 함수
  상태를 업데이트(변경)하는 로직을 수행하는 함수
  장점: 상태 업데이트 예측 가능 why? 상태 업데이트하는 로직은 useReducer에서만 존재 가능
  상태 업데이트하는 로직은 리듀서 함수에서만 존재 가능
  단점: 문법이 어려움
  const [상태 (state), 액션 발생 함수 (dispatch)] = useReducer (리듀서 함수, 초깃값);

• 예)

// 타입 별칭 지정해서 넣기 (코드 구조화)
type ReducerState = number;
type ReducerAction = string;

function reducer(state: ReducerState, action: ReducerAction) {
  if (action === "decrement") return state - 1;
  else if (action === "increment") return state + 1;
  else if (action === "reset") return 0;
  return state; // 아무런 조작하지 않겠다는 기본
}

• useReducer 훅으로 정의한 상태가 업데이트되는 로직이 담긴 함수
• 값을 무조건 반환해야 함
• action: 리듀서 함수 내에서 상대를 업데이트할 때 참조할 수 있는 값 (객체, )