React에서 WebSocket을 활용한 실시간 채팅 UI 구현

1. React에서 WebSocket 연결하기

이제 Django에서 구현한 WebSocket 서버에 React 클라이언트를 연결하여 실시간 채팅 UI를 만듭니다.

목표 React에서 WebSocket 연결 및 메시지 송수신 구현
실시간 채팅 UI 구축
메시지 상태 관리 및 렌더링

2. React 프로젝트 설정

먼저 새로운 React 프로젝트를 생성하고 필요한 패키지를 설치합니다.

# React 프로젝트 생성
npx create-react-app chat-client
cd chat-client

# 필요한 패키지 설치
npm install react-websocket

react-websocket은 WebSocket 연결을 쉽게 관리하는 라이브러리입니다.

3. WebSocket을 통한 채팅 컴포넌트 구현

3.1. Chat.js 파일 생성

React에서 WebSocket을 활용하여 실시간 채팅을 구현합니다.

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

const Chat = () => {
    const [messages, setMessages] = useState([]);
    const [input, setInput] = useState("");
    const socket = new WebSocket("ws://localhost:8000/ws/chat/");

    useEffect(() => {
        socket.onmessage = (event) => {
            const data = JSON.parse(event.data);
            setMessages((prevMessages) => [...prevMessages, data.message]);
        };

        socket.onopen = () => {
            console.log("WebSocket 연결 성공");
        };

        socket.onclose = () => {
            console.log("WebSocket 연결 종료");
        };

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

    const sendMessage = () => {
        if (input.trim()) {
            socket.send(JSON.stringify({ message: input }));
            setInput("");
        }
    };

    return (
        <div>
            <h2>실시간 채팅</h2>
            <div style=>
                {messages.map((msg, index) => (
                    <p key={index}>{msg}</p>
                ))}
            </div>
            <input 
                type="text" 
                value={input} 
                onChange={(e) => setInput(e.target.value)}
            />
            <button onClick={sendMessage}>전송</button>
        </div>
    );
};

export default Chat;

이 코드의 역할

• WebSocket을 생성하여 Django WebSocket 서버와 연결
• 메시지를 받을 때마다 messages 상태를 업데이트하여 UI에 표시
• 사용자가 입력한 메시지를 WebSocket을 통해 서버로 전송

4. React에서 채팅 화면 렌더링

4.1. App.js 수정

React 애플리케이션에서 Chat 컴포넌트를 렌더링합니다.

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

function App() {
    return (
        <div>
            <h1>React WebSocket 채팅</h1>
            <Chat />
        </div>
    );
}

export default App;

이제 웹 브라우저에서 npm start로 실행하면 실시간 채팅이 가능해집니다

5. 테스트 및 실행

이제 Django 서버와 React 클라이언트를 실행하여 WebSocket이 정상적으로 작동하는지 확인합니다.

5.1. Django 서버 실행

python manage.py runserver

5.2. React 클라이언트 실행

npm start

브라우저에서 실시간 채팅 UI가 동작하는지 확인하고, 다른 브라우저나 탭을 열어 WebSocket 메시지가 잘 전달되는지 테스트해 봅니다.

6. 다음 단계

이제 React에서 WebSocket을 연결하고 실시간 채팅 UI를 구현했다. 하지만 아직 메시지를 데이터베이스에 저장하지 못하고 있습니다.

다음 글: 실시간 메시지 저장 및 WebSocket 최적화 (Redis 활용)

• Django에서 받은 메시지를 DB에 저장
• Redis를 활용한 WebSocket 최적화
• JWT 인증을 적용하여 보안 강화

정리 React에서 WebSocket을 연결하여 Django 서버와 실시간 통신 구현 완료
실시간 채팅 UI 제작 완료
WebSocket을 활용한 메시지 송수신 성공