이번 글에서는 Redux Thunk를 활용하여 채팅 애플리케이션을 구현하는 방법에 대해 알아보겠습니다. Redux Thunk는 Redux 미들웨어로써, 비동기 작업을 처리하는데 유용한 도구입니다.

Redux Thunk란?

Redux Thunk는 Redux 액션 객체 내부에서 비동기 작업을 처리할 수 있도록 해주는 미들웨어입니다. Redux 액션은 일반적으로 동기적인 작업을 수행하기 위한 객체를 반환하지만, Redux Thunk를 사용하면 함수를 반환하고, 해당 함수에서 비동기 작업을 처리할 수 있습니다.

채팅 애플리케이션 구현

이제 Redux Thunk를 활용하여 채팅 애플리케이션을 구현해보도록 하겠습니다.

패키지 설치

먼저, Redux Thunk 패키지를 설치해야 합니다. npm을 사용한다면 아래의 명령어를 실행합니다.

npm install redux-thunk

또는 yarn을 사용한다면 아래의 명령어를 실행합니다.

yarn add redux-thunk

액션 생성자 작성

Redux Thunk를 사용하기 위해, 새로운 액션 생성자를 작성해야 합니다. 예를 들어, sendMessage 액션을 비동기 작업으로 처리하고자 한다면 다음과 같이 작성할 수 있습니다.

import { sendMessage as send } from './api';

export const sendMessage = (message) => {
  return async (dispatch) => {
    try {
      const response = await send(message);
      const data = await response.json();
      dispatch({ type: 'SEND_MESSAGE_SUCCESS', payload: data });
    } catch(error) {
      dispatch({ type: 'SEND_MESSAGE_FAILURE', payload: error });
    }
  }
}

위의 예시에서 api 모듈에서 sendMessage 함수를 가져와 비동기 작업을 처리한 뒤, 성공적인 경우 SEND_MESSAGE_SUCCESS 액션을 디스패치하고 실패한 경우 SEND_MESSAGE_FAILURE 액션을 디스패치합니다.

미들웨어 등록

Redux Thunk를 사용하기 위해 애플리케이션의 스토어에 미들웨어를 등록해야 합니다. createStore 함수의 두 번째 인자로 applyMiddleware 함수를 사용하여 등록할 수 있습니다.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

위의 예시에서 thunk를 미들웨어로 사용하기 위해 applyMiddleware 함수에 전달해줍니다.

액션 디스패치

이제 채팅 애플리케이션에서 sendMessage 액션을 디스패치하기 위해 컴포넌트 내부에서 다음과 같이 사용할 수 있습니다.

import { useDispatch } from 'react-redux';
import { sendMessage } from './actions';

const ChatInput = () => {
  const dispatch = useDispatch();

  const handleSendMessage = (message) => {
    dispatch(sendMessage(message));
  }

  return (
    // 채팅 입력 폼 구현
  );
}

위의 예시에서 useDispatch 훅을 사용하여 sendMessage 액션을 디스패치할 수 있습니다. 이를 통해 비동기 작업이 포함된 액션을 실행할 수 있습니다.

마무리

이번 글에서는 Redux Thunk를 활용하여 채팅 애플리케이션을 구현하는 방법에 대해 알아보았습니다. Redux Thunk를 사용하면 비동기 작업을 처리하는데 편리하며, 채팅 애플리케이션과 같이 실시간 상호작용이 필요한 기능을 구현할 때 유용합니다.

더 자세한 내용은 Redux Thunk 공식 문서를 참고하시기 바랍니다.

#redux #redux-thunk