React - useReducer

useReducer란?

useReducer 는 useState와 비슷한 상태관리,업데이트 할 수 있는 훅이다.
useState로는 상태 관리할 데이터가 너무 많아질때 사용하면 좀 더 구조화된 방식으로 관리 할 수 있다.

useReducer 기본 구조

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

state : 컴포넌트에서 사용할 상태
dispatch: 상태 변경시 필요한 정보 전달
reducer : dispatch를 확인해서 state 변경해주는 함수
initialState : state에 전달할 초기값 (이름은 내가 정하고 싶은대로 정해도됨)

useReducer 함수는 첫번째 인자인 reducer 함수가 반환(return)하는 값으로 state를 갱신하는 역할을 한다.

예시

// switch 문법으로 action.type 을 받아 count 증가, 감소 
// reducer.ts
export type TCountProps =
  | { type: 'INCREMENT'; payload: number }
  | { type: 'DECREMENT'; payload: number };
export const countReducer = (count: number, action: TCountProps) => {
  switch (action.type) {
    case 'INCREMENT':
      return count + 1;
    case 'DECREMENT':
      return count - 1;
    default:
      return count;
  }
};
export default countReducer;

// button 클릭시 이벤트 작동 type에는 증가 감소 넘겨주고, payload엔 count변수 넘겨줌
// Counter.tsx
const Counter = () => {
  const [count, dispatch] = useReducer(countReducer, 0);
  return (
    <>
      // 현재 카운트 값은 count인 0 count로부터 읽어옴
      <h1>Count: {number.count}</h1>
      // 카운트 값의 변경을 위해 각 버튼이 클릭되면 dispatch 함수가 발동되면서 reducer 함수가 실행됨.
      // useReducer(reducer, 0) 첫번쨰 매개변수로 넘어
      // action type에는 어떤 버튼을 클릭하였는지에 따라 "decrement" 또는 "increment"가 들어감
   	  <h1>Count: {count}</h1>
      <button onClick={() => dispatch({ type: 'DECREMENT', payload: count })}>
        -
      </button>
      <button onClick={() => dispatch({ type: 'INCREMENT', payload: count })}>
        +
      </button>
    </>
  );
}

완성 : https://stackblitz.com/edit/vitejs-vite-w9clpq?file=src%2FApp.tsx