[리액트] useReducer

✅ 1. useReducer란

useReducer는 React에서 상태를 업데이트하는 또 다른 방법으로,
상태를 단순히 바꾸는 것이 아니라
“요청(action)”을 보내고 → “처리기(reducer)”가 계산해서 → “새 상태(state)”를 반환하는 구조로 작동

즉,
📌 복잡한 상태 로직을 명확하게 정리하고
📌 여러 종류의 상태 변경을 깔끔히 관리하기 위해 사용

🧠 언제 useReducer를 쓰면 좋을까?

상황	이유
🔁 다양한 액션(type)이 필요한 경우	예: 입금, 출금, 초기화, 수수료 등 분기처리
🧱 상태가 객체나 배열처럼 구조적인 경우	예: 장바구니, 투두 리스트 등 복합 상태
🧩 상태 업데이트 로직이 복잡할 때	if-else나 switch로 정리하면 깔끔
🔧 상태 로직을 컴포넌트 밖으로 분리하고 싶을 때	테스트, 재사용, 관리가 쉬움

🧩 기본 형식

구성요소	역할
state	현재 상태 (예: 잔고, 장바구니 배열 등)
action	상태를 어떻게 바꿀지 지시하는 객체
dispatch()	액션을 reducer에 전달하는 함수
reducer(state, action)	현재 상태와 액션을 받아 새로운 상태를 반환

const [state, dispatch] = useReducer(reducer, 초기값);

const reducer = (state, action) => {
  switch (action.type) {
    case '액션명':
      return 새로운상태;
    default:
      return state;
  }
};

🔄 데이터 흐름 요약

1. 버튼 클릭 → dispatch(action) 실행
2. action 객체가 reducer로 전달됨
3. reducer에서 새로운 state 계산
4. React가 새 state로 리렌더링

🏦 비유로 이해하는 useReducer

💬 시나리오

철수(dispatch)가 은행(reducer)에게
"만원 출금해주세요!"(action)을 요청하면,

은행은 철수의 계좌(state)를 확인해서
잔고를 계산하고 → 새로운 잔고(state)를 알려줍니다.

🧩 역할 비교표

React 용어	비유	역할
dispatch()	철수	요청을 전달하는 사람
action	철수의 말	어떤 요청인지 설명하는 객체 (type, payload)
reducer()	은행원	요청을 받고 계산함
state	철수의 통장	현재 상태 (잔고 등)
useReducer()	시스템 전체	이 모든 걸 연결해주는 리액트 훅

🔁 예시 흐름 (출금 1만원)

🟦 1. 철수의 요청 (dispatch)

dispatch({ type: "withdraw", payload: 10000 });

→ 철수: “만원 출금해주세요!”

🟨 2. 은행원의 처리 (reducer)

const reducer = (state, action) => {
  switch (action.type) {
    case "withdraw":
      return state - action.payload;

→ 은행: “현재 잔고에서 만원 차감해야겠군요.”

🟥 3. 상태(state) 업데이트

const [money, dispatch] = useReducer(reducer, 30000);

→ 현재 잔고 30000 → 20000으로 업데이트
→ 자동 리렌더링: 화면에 20000원 표시

예시코드
github: use-reducer-bank