Redux Toolkit을 이용한 자바스크립트 앱의 웹 소켓 통신 방법

21 Sep 2023

redux

웹 소켓은 클라이언트와 서버 간의 양방향 통신을 제공하는 프로토콜입니다. Redux Toolkit은 Redux 상태 관리 라이브러리를 개선해주는 도구 모음이며, 이를 활용하여 자바스크립트 앱에서 웹 소켓 통신을 쉽게 구현할 수 있습니다. 이번 블로그 포스트에서는 Redux Toolkit을 사용하여 자바스크립트 앱에 웹 소켓 통신을 추가하는 방법에 대해 알아보겠습니다.

Redux Toolkit 설치

먼저 Redux Toolkit을 설치해야 합니다. 프로젝트 폴더에서 다음 명령을 실행하여 Redux Toolkit을 설치합니다.

npm install @reduxjs/toolkit

웹 소켓 통신 설정

Redux Toolkit을 사용하여 웹 소켓 통신을 구현하기 위해 몇 가지 설정이 필요합니다. redux-saga를 사용하여 비동기 작업을 처리하기 위해, socket.io-client 라이브러리를 사용하여 웹 소켓 연결을 설정합니다.

import { createAction, createSlice } from '@reduxjs/toolkit';
import { call, put, takeEvery } from 'redux-saga/effects';
import { io } from 'socket.io-client';

// 액션 생성자
export const connectToWebSocket = createAction('webSocket/connectToWebSocket');
export const webSocketConnected = createAction('webSocket/webSocketConnected');
export const webSocketDisconnected = createAction('webSocket/webSocketDisconnected');
export const receiveMessage = createAction('webSocket/receiveMessage');

// 사가 함수
function* initWebSocket() {
  const socket = io('http://localhost:3000'); // 웹 소켓 연결 설정
  yield call([socket, 'connect']);
  yield put(webSocketConnected());

  yield takeEvery('webSocket/sendMessage', function* (action) {
    yield call([socket, 'emit'], 'message', action.payload);
  });

  yield takeEvery('webSocket/disconnect', function* () {
    yield call([socket, 'disconnect']);
    yield put(webSocketDisconnected());
  });

  yield takeEvery('webSocket/receiveMessage', function* (action) {
    // 받은 메시지 처리 로직
  });
}

export function* watchWebSocket() {
  yield takeEvery('webSocket/connectToWebSocket', initWebSocket);
}

// 리듀서
const webSocketSlice = createSlice({
  name: 'webSocket',
  initialState: {
    isConnected: false,
    messages: [],
  },
  reducers: {
    addMessage: (state, action) => {
      state.messages.push(action.payload);
    },
  },
});

export const { addMessage } = webSocketSlice.actions;

export default webSocketSlice.reducer;

위 코드에서 connectToWebSocket 액션을 dispatch하면 웹 소켓이 연결되며, sendMessage 액션을 dispatch하면 메시지를 서버로 전송합니다. disconnect 액션을 dispatch하면 웹 소켓 연결이 종료됩니다.

웹 소켓 상태 관리

Redux Toolkit을 이용하여 웹 소켓 통신을 구현하면, 웹 소켓 상태를 Redux Store에서 관리할 수 있습니다. 웹 소켓 연결 상태와 받은 메시지들을 Redux Store에서 가져올 수 있어 다른 컴포넌트에서 이를 사용할 수 있습니다.

import { useDispatch, useSelector } from 'react-redux';
import { connectToWebSocket, sendMessage, disconnect } from './webSocketSlice';

function WebSocketComponent() {
  const dispatch = useDispatch();
  const isConnected = useSelector((state) => state.webSocket.isConnected);
  const messages = useSelector((state) => state.webSocket.messages);

  const handleConnect = () => {
    dispatch(connectToWebSocket());
  };

  const handleSendMessage = () => {
    dispatch(sendMessage('Hello, WebSocket!'));
  };

  const handleDisconnect = () => {
    dispatch(disconnect());
  };

  return (
    <div>
      <button onClick={handleConnect}>Connect</button>
      <button onClick={handleSendMessage}>Send Message</button>
      <button onClick={handleDisconnect}>Disconnect</button>

      <div>
        {isConnected ? 'Connected' : 'Disconnected'}
      </div>

      <div>
        {messages.map((message, index) => (
          <div key={index}>{message}</div>
        ))}
      </div>
    </div>
  );
}

export default WebSocketComponent;

해당 컴포넌트에서 handleConnect, handleSendMessage, handleDisconnect 함수를 통해 각각 웹 소켓 연결, 메시지 전송, 연결 종료를 할 수 있습니다. 상태값인 isConnected는 웹 소켓 연결 상태를 나타내며, messages는 받은 메시지들을 표시합니다.

이제 Redux Toolkit을 이용하여 자바스크립트 앱에 웹 소켓 통신을 쉽게 추가할 수 있습니다. Redux Toolkit의 간편한 사용법과 웹 소켓 통신의 기본 개념에 대해 자세히 알아봤습니다.

#Redux #JavaScript