MobX를 이용한 웹소켓 통신 구현 방법

17 Oct 2023

mobx

이번 블로그 포스트에서는 MobX를 이용하여 웹소켓 통신을 구현하는 방법에 대해 알아보겠습니다. MobX는 상태 관리 라이브러리로, React와 함께 사용하여 간단하고 효율적인 상태 관리를 할 수 있습니다. 웹소켓은 실시간 양방향 통신을 제공하는 프로토콜로, 클라이언트와 서버 사이에 데이터를 실시간으로 주고받을 수 있습니다. 따라서 MobX와 웹소켓을 결합하여 실시간 상태 업데이트를 구현할 수 있습니다.

필요한 패키지 설치

먼저 프로젝트에 필요한 패키지들을 설치해야 합니다. Node.js와 npm이 이미 설치되어 있다고 가정합니다.

npm install mobx mobx-react mobx-react-lite
npm install websocket

MobX 스토어 생성

MobX에서는 데이터를 관리하는 스토어(store)를 생성하여 상태를 관리합니다. 아래와 같이 스토어를 생성합니다.

import { observable, action } from "mobx";

class WebSocketStore {
  @observable
  isConnected = false;

  @observable
  message = "";

  @action
  connectWebSocket() {
    // 웹소켓 연결 로직 구현
  }

  @action
  closeWebSocket() {
    // 웹소켓 연결 종료 로직 구현
  }

  @action
  sendMessage(msg) {
    // 메세지 전송 로직 구현
  }
}

const webSocketStore = new WebSocketStore();
export default webSocketStore;

위의 코드에서 socket과 message는 MobX의 observable 데코레이터를 통해 관찰 가능한 상태로 선언됩니다. connectWebSocket, closeWebSocket, sendMessage는 각각 웹소켓 연결, 연결 종료, 메세지 전송과 관련된 액션입니다.

컴포넌트에서 MobX 스토어 사용

이제 MobX 스토어를 사용하여 웹소켓 통신을 구현하는 컴포넌트를 만들어보겠습니다.

import React, { useEffect } from "react";
import { observer } from "mobx-react-lite";
import webSocketStore from "./WebSocketStore";

const WebSocketComponent = observer(() => {
  useEffect(() => {
    // 컴포넌트가 마운트될 때 웹소켓 연결을 수행
    webSocketStore.connectWebSocket();

    return () => {
      // 컴포넌트가 언마운트될 때 웹소켓 연결 종료
      webSocketStore.closeWebSocket();
    };
  }, []);

  const handleSendMessage = () => {
    webSocketStore.sendMessage("Hello, WebSocket!");
  };

  return (
    <div>
      <button onClick={handleSendMessage}>Send Message</button>
      <div>{webSocketStore.isConnected ? "Connected" : "Disconnected"}</div>
      <div>Received Message: {webSocketStore.message}</div>
    </div>
  );
});

export default WebSocketComponent;

위의 코드에서 MobX 스토어를 import하고, 컴포넌트 내부에서 observer 함수를 사용하여 스토어의 상태 변화를 감지할 수 있습니다. useEffect를 사용하여 컴포넌트가 마운트될 때와 언마운트될 때 웹소켓 연결 및 종료를 수행하도록 설정합니다. handleSendMessage 함수는 버튼 클릭 시 메세지를 보내는 로직을 담당합니다.

결론

이제 MobX를 이용하여 웹소켓 통신을 구현하는 방법을 알아보았습니다. MobX의 상태 관리 기능을 이용하면 웹소켓을 통한 실시간 상태 업데이트를 쉽게 구현할 수 있습니다. MobX의 공식 문서와 WebSocket 라이브러리의 문서를 참고하여 자세한 사용법을 익혀보세요.

더 많은 MobX 관련 리소스는 MobX 공식 문서에서 확인할 수 있습니다.

#mobx #websocket