Custom Hook을 활용한 웹소켓 통신 구현하기

06 Nov 2023

reactjs

웹소켓은 실시간 양방향 통신을 한다는 특징으로 인해 실시간 채팅이나 게임 등에 자주 사용되는 프로토콜입니다. 이번 글에서는 React에서 웹소켓 통신을 구현하는 방법 중 하나인 Custom Hook을 활용하는 방법에 대해 알아보겠습니다.

1. React와 웹소켓 라이브러리 설치하기

먼저 프로젝트 폴더에서 다음 명령어를 사용하여 React와 웹소켓 라이브러리를 설치해야 합니다.

npm install react react-dom
npm install websocket

2. Custom Hook 작성하기

Custom Hook을 사용하여 웹소켓 통신을 구현하기 위해 다음과 같이 useWebSocket 함수를 작성합니다.

import { useEffect, useState } from 'react';
import WebSocket from 'websocket';

const useWebSocket = (url) => {
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    const ws = new WebSocket(url);

    ws.onopen = () => {
      console.log('WebSocket connected');
    };

    ws.onmessage = (event) => {
      console.log('Received message:', event.data);
    };

    ws.onclose = () => {
      console.log('WebSocket disconnected');
    };

    setSocket(ws);

    // Cleanup function when component unmounts
    return () => {
      ws.close();
    };
  }, [url]);

  return socket;
};

export default useWebSocket;

위 코드에서는 useWebSocket 함수가 url을 매개변수로 받아 웹소켓 연결을 수행합니다. 웹소켓 객체의 onopen, onmessage, onclose 이벤트를 이용하여 연결 상태를 확인하고 메시지를 수신할 수 있습니다. 컴포넌트가 언마운트되거나 url이 변경되면 정리 함수를 통해 웹소켓 연결을 종료합니다.

3. 컴포넌트에서 Custom Hook 사용하기

이제 컴포넌트에서 Custom Hook을 사용하여 웹소켓 통신을 구현해보겠습니다.

import React from 'react';
import useWebSocket from './useWebSocket';

const WebSocketComponent = () => {
  const url = 'ws://example.com'; // 웹소켓 서버 주소
  const socket = useWebSocket(url);

  const sendMessage = (message) => {
    if (socket && socket.readyState === WebSocket.OPEN) {
      socket.send(message);
    }
  };

  return (
    <div>
      <h1>WebSocket Example</h1>
      <button onClick={() => sendMessage('Hello, WebSocket!')}>Send Message</button>
    </div>
  );
};

export default WebSocketComponent;

위 코드에서는 useWebSocket Custom Hook을 호출하여 웹소켓 연결을 생성합니다. 그리고 sendMessage 함수를 통해 메시지를 전송할 수 있습니다. 클릭 이벤트가 발생하면 ‘Hello, WebSocket!’ 메시지가 서버에 전송됩니다.

마무리

이번에는 Custom Hook을 활용하여 React에서 웹소켓 통신을 구현하는 방법에 대해 살펴보았습니다. Custom Hook을 사용함으로써 코드를 재사용하고 명확하게 구조화할 수 있습니다. React의 강력한 기능과 웹소켓의 실시간 통신 기능을 활용해 다양한 웹 애플리케이션을 개발해보세요.

참고 자료

#React #웹소켓