JSX pragma를 활용한 웹 소켓 통신 방법

05 Oct 2023

JSXpragma

이번 포스트에서는 JSX pragma를 활용하여 웹 소켓 통신을 구현하는 방법을 알아보겠습니다. 웹 소켓은 실시간 통신을 위한 프로토콜로, 서버와 클라이언트 간 양방향 통신을 가능하게 합니다. JSX pragma는 React의 확장 문법 중 하나로, JSX 코드를 자바스크립트 함수 호출로 변환하는 역할을 합니다.

1. Web Socket 연결 설정

웹 소켓 통신을 위해서는 먼저 웹 소켓 연결을 설정해야 합니다. WebSocket 객체를 생성하고, onopen, onmessage, onclose 등의 이벤트 리스너를 등록합니다. 다음은 웹 소켓 연결 설정을 위한 예제 코드입니다.

import React, { useState, useEffect } from 'react';

function MyWebSocketComponent() {
  const [webSocket, setWebSocket] = useState(null);

  useEffect(() => {
    // 웹 소켓 연결 생성
    const socket = new WebSocket('wss://example.com');

    // 연결 이벤트 핸들러
    socket.onopen = () => {
      console.log('WebSocket connection established');
    };

    // 메시지 수신 이벤트 핸들러
    socket.onmessage = (event) => {
      console.log('Received message:', event.data);
    };

    // 연결 종료 이벤트 핸들러
    socket.onclose = () => {
      console.log('WebSocket connection closed');
    };

    // 상태 업데이트
    setWebSocket(socket);

    // 컴포넌트 언마운트 시 연결 종료
    return () => {
      socket.close();
    };
  }, []);

  // TODO: 웹 소켓 통신에 필요한 로직 작성

  return (
    <div>
      {/* JSX 요소 */}
    </div>
  );
}

export default MyWebSocketComponent;

위 코드에서 MyWebSocketComponent 컴포넌트는 웹 소켓 통신을 위한 기본적인 세팅을 담고 있습니다.

2. 메시지 전송

웹 소켓 연결이 설정되었다면, 메시지를 전송할 수 있습니다. webSocket.send 메서드를 사용하여 메시지를 전송할 수 있습니다. 예를 들어, 버튼을 눌렀을 때 메시지를 서버에 전송하는 코드는 다음과 같습니다.

function MyWebSocketComponent() {
  // ...

  const handleSendMessage = () => {
    if (webSocket) {
      webSocket.send('Hello, server!');
    }
  };

  return (
    <div>
      {/* ... */}
      <button onClick={handleSendMessage}>Send Message</button>
    </div>
  );
}

위 예제에서 handleSendMessage 함수를 통해 서버로 메시지를 전송하고 있습니다.

3. 메시지 수신

서버로부터 메시지를 수신하려면, onmessage 이벤트 핸들러를 활용해야 합니다. 이를 위해 useState 훅을 사용하여 수신된 메시지를 상태로 관리할 수 있습니다. 다음은 메시지를 수신한 후 상태 업데이트를 위한 예제 코드입니다.

function MyWebSocketComponent() {
  // ...

  const [receivedMessage, setReceivedMessage] = useState('');

  useEffect(() => {
    // ...

    // 메시지 수신 이벤트 핸들러
    socket.onmessage = (event) => {
      setReceivedMessage(event.data);
    };

    // ...
  }, []);

  return (
    <div>
      {/* ... */}
      <p>Received Message: {receivedMessage}</p>
    </div>
  );
}

위 예제에서 receivedMessage 상태 변수를 통해 수신된 메시지를 화면에 렌더링하고 있습니다.

마무리

이번 포스트에서는 JSX pragma를 활용하여 웹 소켓 통신을 구현하는 방법을 살펴보았습니다. JSX pragma를 사용하면 React 컴포넌트에서 웹 소켓 통신을 쉽게 구현할 수 있습니다. 웹 소켓을 활용하면 실시간 통신 기능을 간편하게 개발할 수 있으므로, 웹 애플리케이션에서 실시간 업데이트가 필요한 경우 유용하게 활용할 수 있습니다.

#React #웹소켓