dispatch() 기능

 

 

 

dispatch()는 다양한 라이브러리와 프레임워크에서 상태나 액션을 전달할 때 사용되는 함수입니다. 어떤 컨텍스트에서 사용하는지에 따라 동작이 달라질 수 있습니다. 아래에 몇 가지 대표적인 예시를 소개할게요.

---

1. Redux에서 dispatch()

Redux에서 dispatch()는 액션을 리듀서에 전달하여 상태를 업데이트하는 데 사용됩니다.

import { useDispatch } from 'react-redux';

function Counter() {
  const dispatch = useDispatch();

  const increment = () => {
    dispatch({ type: 'INCREMENT' });  // 액션을 디스패치
  };

  return <button onClick={increment}>Increment</button>;
}

 

설명

• dispatch({ type: 'INCREMENT' })는 'INCREMENT' 액션을 스토어에 보냅니다.
• 리듀서가 이 액션을 받아 상태를 업데이트합니다.

---

2. React Context API에서 dispatch()

Context API와 useReducer를 함께 사용할 때 dispatch()로 상태를 변경할 수 있습니다.

const initialState = { count: 0 };

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

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

  return (
    <>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>
        Increment
      </button>
    </>
  );
}

 

설명:

• dispatch()는 reducer 함수에 액션을 전달하여 상태를 변경합니다.
• Redux 없이도 비슷한 상태 관리 패턴을 사용할 수 있습니다.

---

3. Redux Toolkit에서 dispatch()

Redux Toolkit을 사용할 때도 dispatch()를 사용하지만 액션 크리에이터와 함께 사용하면 코드가 더 간결합니다.

import { useDispatch } from 'react-redux';
import { increment } from './counterSlice';

function Counter() {
  const dispatch = useDispatch();

  return (
    <button onClick={() => dispatch(increment())}>
      Increment
    </button>
  );
}

 

설명:

• increment()는 미리 정의된 액션 크리에이터입니다.
• 액션 타입 문자열을 직접 입력할 필요가 없습니다.

---

4. React Query나 다른 라이브러리에서의 dispatch()

일부 라이브러리나 커스텀 훅에서도 비슷한 이름의 dispatch가 있을 수 있지만 기본적으로 이벤트나 액션을 실행하는 기능을 담당합니다.

 

 

 

 

 

 

 

#프로그래밍 #React #Redux # dispatch