"dispatch"라는 용어는 주로 Redux 또는 다른 상태 관리 라이브러리와 함께 사용될 때 등장합니다.
Redux에서의 Dispatch
Redux는 JavaScript 앱에서 상태 관리를 위한 인기 있는 라이브러리입니다. Redux에서 "dispatch"는 액션(Action)을 발송하는 함수입니다. 이 함수는 액션 객체를 인자로 받아 Redux 스토어(Store)에 전달하며, 이를 통해 앱의 상태를 변경하게 됩니다.
- 액션(Action): 액션은 상태 변경을 일으키는 정보를 담고 있는 객체입니다. 보통
type 필드를 포함하며, 추가적인 데이터를 포함할 수 있습니다.
- 리듀서(Reducer): 리듀서는 현재 상태와 액션 객체를 받아 새로운 상태를 반환하는 순수 함수입니다. Dispatch된 액션이 리듀서에 도달하면, 리듀서는 해당 액션 타입에 따라 상태를 변경합니다.
사용 예시
Redux를 사용하는 Next.js 애플리케이션에서 dispatch의 사용 예시는 다음과 같습니다:
-
액션 정의:
const addAction = {
type: 'ADD_TODO',
payload: 'Learn Next.js'
};
-
Dispatch 사용:
import { useDispatch } from 'react-redux';
function MyComponent() {
const dispatch = useDispatch();
const handleAddTodo = () => {
dispatch(addAction);
};
return (
<button onClick={handleAddTodo}>Add Todo</button>
);
}
이 예시에서는 버튼을 클릭할 때 ADD_TODO 액션이 Dispatch되어 Redux 스토어에 전달됩니다.
Context API와 useReducer
React의 Context API와 useReducer 훅을 사용하는 경우에도 "dispatch" 용어가 사용됩니다. useReducer를 사용하면 Redux와 유사한 방식으로 애플리케이션의 상태를 관리할 수 있으며, 이 경우에도 dispatch 함수를 사용하여 액션을 발송합니다.
Redux나 Context API 외에도, 다양한 상태 관리 라이브러리나 패턴에서 dispatch 개념이 사용될 수 있습니다. 주로 애플리케이션의 상태를 변경하기 위해 특정한 액션을 발송하는 데 사용됩니다.