⚙️ React에서 dispatch란 무엇일까?

React를 사용할 때 상태를 업데이트할 수 있는 여러 방법이 있다.
가장 기본적으로는 useState 훅이 있지만,
상태가 복잡해지거나 구조적으로 관리가 필요할 때는 useReducer를 쓰게 된다.

이때 등장하는 것이 바로 dispatch다.

---

dispatch란?

dispatch는 "행동을 전달하다"라는 뜻을 가진 함수로,
상태를 업데이트하는 액션(action) 을 리듀서(reducer) 함수에 전달하는 역할을 한다.

간단히 말하면:

"어떤 일이 일어나야 한다고 알리는 함수"

---

useReducer에서의 dispatch

useReducer는 React에서 복잡한 상태를 관리할 수 있도록 도와주는 훅이다.
이 훅을 사용할 때 dispatch를 통해 상태 업데이트를 요청한다.

예시 코드

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

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

  return (
    <div>
      <p>현재 카운트: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>증가</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>감소</button>
    </div>
  );
}

설명

• dispatch({ type: 'increment' })는 type이 increment인 액션을 리듀서에 전달한다.
• 리듀서는 액션 타입에 따라 새로운 상태를 반환한다.
• 결국 dispatch는 상태 변경 요청을 보내는 함수다.

---

Redux에서의 dispatch

Redux에서도 dispatch의 개념은 동일하다.
액션을 dispatch해서 스토어에 상태 변경을 알리고, 이에 따라 리듀서가 새로운 상태를 만들어낸다.

store.dispatch({ type: 'ADD_TODO', payload: '할 일 추가하기' });

여기서도 dispatch는 type과 데이터를 가진 객체를 리듀서에 전달하는 역할을 한다.

---

언제 dispatch를 사용할까?

• 상태 업데이트가 단순하지 않을 때 (useState로 관리하기 복잡할 때)
• 여러 상태를 한꺼번에 관리해야 할 때
• 상태 변경이 명확한 "행동(action)"으로 나눠질 때
• Redux와 같은 전역 상태 관리 도구를 사용할 때

---

🔨 TIL

• dispatch는 상태 변경 요청을 리듀서에 전달하는 역할을 하는 함수이다.
• useReducer나 Redux와 함께 사용되며, 복잡한 상태를 구조적으로 관리할 수 있게 해준다.
• 액션 객체를 통해 상태 변화의 원인을 명확하게 표현할 수 있어 디버깅과 유지보수에 유리하다.