React 애플리케이션에서 WebSocket을 사용하여 실시간 데이터를 주고받을 수 있다. 이를 위해 useWebSocket 훅을 사용하여 WebSocket을 쉽게 관리하고, 서버와의 연결을 효율적으로 처리할 수 있다. 이번 글에서는 useWebSocket 훅을 어떻게 활용할 수 있는지에 대해 설명하겠다!
1. useWebSocket 훅
useWebSocket은 React에서 WebSocket을 간편하게 사용하기 위한 훅이다. 이 훅은 연결된 WebSocket 서버와의 상태를 관리하고, 메세지를 전송하거나 수신하는 기능을 제공한다. 이를 통해 실시간 데이터 통신을 쉽게 구현할 수 있다.
2. useWebSocket 설치
npm install @oshai/use-websocket3. useWebSocket 훅 사용
useWebSocket 훅을 사용하여 WebSocket을 관리하는 예를 살펴보자! 아래는 서버에 메세지를 보내고, 서버로부터 메세지를 받는 상황이다.
import React, { useState } from 'react';
import { useWebSocket } from '@oshai/use-websocket';
const WebSocketExample = () => {
// WebSocket 서버 주소를 전달합니다.
const { sendMessage, lastMessage, readyState } = useWebSocket('ws://example.com/socket');
const [message, setMessage] = useState('');
const handleSendMessage = () => {
// 메세지를 보내는 함수 호출
sendMessage(message);
setMessage('');
};
return (
<div>
<div>
<h3>서버로부터 받은 메세지:</h3>
<pre>{lastMessage ? lastMessage.data : '메세지가 없습니다'}</pre>
</div>
<div>
<input
type="text"
value={message}
onChange={(e) => setMessage(e.target.value)}
placeholder="메세지를 입력하세요."
/>
<button onClick={handleSendMessage}>전송</button>
</div>
<div>
<p>서버 상태: {readyState === 1 ? '연결됨' : '연결 안됨'}</p>
</div>
</div>
);
};
export default WebSocketExample;-
sendMessage: WebSocket을 통해 서버에 메세지를 전송하는 함수다. 이 함수는 문자열, 객체 등 다양한 형태의 데이터를 서버로 보낼 수 있다.
-
lastMessage: 서버로부터 마지막으로 수신된 메세지를 나타낸다. lastMessage 객체는 data 속성을 가지고 있으며, 이를 통해 실제 메세지 내용을 확인할 수 있다.
-
readyState: WebSocket의 연결 상태를 나타내는 값이다. readyState는 다음과 같은 값을 가질 수 있다.
0: 연결되지 않음 (CONNECTING) 1: 연결됨 (OPEN) 2: 연결 종료됨 (CLOSING) 3: 연결 끊어짐 (CLOSED)
4. WebSocket 상태 관리
useWebSocket 훅을 사용하면 WebSocket의 연결 상태를 쉽게 확인할 수 있다. 예를 들어, 연결 상태를 UI에 표시하거나, 연결이 끊어졌을 때 자동으로 재연결을 시도하도록 구현할 수 있다.
상태에 따른 UI 표시 예
<p>서버 상태: {readyState === 1 ? '연결됨' : '연결 안됨'}</p>5. 메세지 전송 시 에러 처리
WebSocket 연결 중에 오류가 발생할 수 있다. 예를 들어, 서버가 다운된 경우 메세지를 보내거나 받을 수 없다. 이럴 때는 onError와 onClose 콜백을 통해 오류를 처리할 수 있다.
const { sendMessage, lastMessage, readyState, error } = useWebSocket('ws://example.com/socket', {
onError: (e) => {
console.error('WebSocket 오류:', e);
},
onClose: () => {
console.log('WebSocket 연결 종료');
},
});
6. WebSocket을 통한 실시간 채팅 예시
React 애플리케이션에서 실시간 채팅 기능을 구현하는 데 useWebSocket 훅을 사용할 수 있다. 서버에서 메세지를 받아 실시간으로 화면에 출력하고, 사용자가 메세지를 보내면 서버로 전달하는 방식이다.
import React, { useState } from 'react';
import { useWebSocket } from '@oshai/use-websocket';
const ChatRoom = () => {
const { sendMessage, lastMessage } = useWebSocket('ws://example.com/chat');
const [message, setMessage] = useState('');
const handleSendMessage = () => {
if (message.trim()) {
sendMessage(message);
setMessage('');
}
};
return (
<div>
<div>
<h3>채팅</h3>
<div>{lastMessage ? lastMessage.data : '메세지가 없습니다.'}</div>
</div>
<input
type="text"
value={message}
onChange={(e) => setMessage(e.target.value)}
placeholder="메세지를 입력하세요"
/>
<button onClick={handleSendMessage}>전송</button>
</div>
);
};
export default ChatRoom;
7. WebSocket 서버 설정
WebSocket 서버는 ws:// 또는 wss:// 프로토콜을 사용하여 연결할 수 있다. 일반적으로 Node.js를 이용한 ws 패키지나 socket.io와 같은 라이브러리를 사용하여 서버를 구현한다.
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
ws.on('message', (message) => {
console.log('received: %s', message);
});
ws.send('서버에서 보낸 메세지');
});👉 정리
React에서 useWebSocket 훅을 사용하면 실시간 데이터 통신을 매우 간편하게 구현할 수 있다. 이 훅을 통해 서버와의 WebSocket 연결을 효율적으로 관리하고, 메세지를 주고받을 수 있다. 실시간 채팅, 알림, 데이터 스트리밍 등 다양한 기능을 React 애플리케이션에서 손쉽게 구현할 수 있으므로, WebSocket을 사용하는 애플리케이션에서 매우 유용한 툴이다!
