[javascript] 리액트 라우터의 라우팅 WebSocket 통신

04 Dec 2023

javascript

리액트는 널리 사용되는 자바스크립트 라이브러리로서, 웹 애플리케이션을 개발하는 데에 많이 활용됩니다. 리액트 라우터(React Router)는 리액트 애플리케이션에서 라우팅 기능을 제공하는 라이브러리입니다. 하지만, 기본적으로 리액트 라우터는 HTTP 프로토콜을 통한 통신을 지원합니다. 이번에는 리액트 라우터를 사용하여 WebSocket 프로토콜을 통한 통신을 구현하는 방법에 대해 알아보겠습니다.

WebSocket?

WebSocket은 양방향 통신을 지원하는 프로토콜로서, 서버와 클라이언트 간 실시간으로 데이터를 주고받을 수 있습니다. 이를 통해 애플리케이션은 실시간 업데이트를 통해 사용자 경험을 개선할 수 있습니다.

리액트 라우터를 통한 라우팅

리액트 라우터는 라우팅을 위해 <Route> 컴포넌트를 제공합니다. 이를 통해 특정 URL 경로와 컴포넌트를 연결할 수 있습니다.

import { Route } from 'react-router-dom';

<Route path="/about" component={About} />

위의 예제에서 /about 경로에 접근하면 About 컴포넌트가 렌더링됩니다.

WebSocket을 사용한 통신

WebSocket을 사용하기 위해서는 WebSocket 객체를 생성해야 합니다. 여기서는 useEffect 훅을 사용하여 컴포넌트가 마운트될 때 WebSocket 연결을 수립하도록 구현해 보겠습니다.

import React, { useEffect } from 'react';

function Chat() {
  useEffect(() => {
    const socket = new WebSocket('ws://localhost:8080');

    socket.addEventListener('open', () => {
      console.log('WebSocket Connected');
    });

    socket.addEventListener('message', (event) => {
      console.log('Received Message:', event.data);
    });

    return () => {
      socket.close();
    };
  }, []);

  return (
    <div>
      <h1>WebSocket Chat</h1>
    </div>
  );
}

export default Chat;

위의 예제에서는 useEffect 훅 내에서 WebSocket을 생성하고, 연결 성공 시 open 이벤트 핸들러를 등록하고, 메시지를 수신할 때마다 message 이벤트 핸들러를 등록합니다. 또한, 컴포넌트가 언마운트될 때 WebSocket 연결을 해제하기 위해 clean-up 함수를 반환합니다.

이제 리액트 애플리케이션에서 WebSocket을 사용하여 실시간 통신을 구현할 수 있습니다.

결론

리액트 라우터를 통해 라우팅 기능을 지원하는 애플리케이션에서 실시간 통신을 위해 WebSocket을 사용하는 방법에 대해 알아보았습니다. 웹소켓을 활용하면 사용자 경험을 향상시킬 수 있으며, 리액트와 결합하여 더욱 강력한 웹 애플리케이션을 개발할 수 있습니다.

WebSocket?

리액트 라우터를 통한 라우팅

WebSocket을 사용한 통신

결론

참고 자료