React.js로 구현한 실시간 채팅 애플리케이션 만들기

09 Nov 2023

reactjs

이제는 실시간으로 채팅을 주고받을 수 있는 애플리케이션을 만들어보려고 합니다. 이번 포스트에서는 React.js를 사용하여 실시간 채팅 애플리케이션을 구현하는 방법에 대해 알아보겠습니다.

개발 환경 설정

먼저, React.js를 사용하기 위해 개발 환경을 설정해야 합니다. Node.js가 설치되어 있다면 다음 명령을 사용하여 React 애플리케이션을 생성할 수 있습니다.

npx create-react-app chat-app

위 명령을 실행하면 chat-app이라는 이름의 새로운 디렉토리가 생성되고, React 애플리케이션을 개발할 준비가 완료됩니다.

Socket.io를 사용한 실시간 통신

이 애플리케이션에서는 Socket.io를 사용하여 실시간 통신을 구현할 것입니다. Socket.io는 웹 소켓을 사용하여 클라이언트와 서버 간의 양방향 통신을 가능하게 해줍니다.

먼저, 필요한 패키지를 설치해야 합니다. chat-app 디렉토리로 이동하여 다음 명령을 실행하세요.

npm install socket.io-client

이제 클라이언트에서 서버로 연결할 수 있는 준비가 완료되었습니다. 이제 애플리케이션의 메인 컴포넌트에서 Socket.io를 사용하여 서버에 연결하고, 채팅 메시지를 주고받을 수 있습니다.

import React, { useEffect, useState } from 'react';
import io from 'socket.io-client';

const ChatApp = () => {
  const [socket, setSocket] = useState(null);
  const [chatMessages, setChatMessages] = useState([]);
  const [newMessage, setNewMessage] = useState('');

  useEffect(() => {
    const newSocket = io('http://localhost:3000');
    setSocket(newSocket);

    return () => {
      newSocket.disconnect();
    };
  }, []);

  useEffect(() => {
    if (socket) {
      socket.on('chat message', (message) => {
        setChatMessages((prevMessages) => [...prevMessages, message]);
      });
    }
  }, [socket]);

  const handleSendMessage = (e) => {
    e.preventDefault();
    if (newMessage) {
      socket.emit('chat message', newMessage);
      setNewMessage('');
    }
  };

  return (
    <div>
      <ul>
        {chatMessages.map((message) => (
          <li key={message}>{message}</li>
        ))}
      </ul>
      <form onSubmit={handleSendMessage}>
        <input
          type="text"
          value={newMessage}
          onChange={(e) => setNewMessage(e.target.value)}
        />
        <button type="submit">Send</button>
      </form>
    </div>
  );
};

export default ChatApp;

위 코드에서는 Socket.io의 io 함수를 사용하여 서버에 연결하고, 연결을 유지하기 위해 socket 상태를 설정합니다. 또한, 메시지를 주고받기 위한 상태인 chatMessages와 newMessage를 설정하고, 메시지를 보내는 handleSendMessage 함수를 작성합니다.

실시간 채팅 애플리케이션 사용하기

이제 실시간 채팅 애플리케이션을 사용할 수 있습니다. chat-app 디렉토리에서 다음 명령을 실행하여 애플리케이션을 실행하세요.

npm start

실행한 후, 웹 브라우저에서 http://localhost:3000에 접속하여 실시간 채팅을 사용할 수 있습니다.

마무리

이번 포스트에서는 React.js를 사용하여 실시간 채팅 애플리케이션을 구현하는 방법에 대해 알아보았습니다. Socket.io를 사용하여 클라이언트와 서버 간의 실시간 통신을 구현하는 것은 간단하지만 매우 강력한 도구입니다. 실시간 채팅 애플리케이션을 구현해보면서 React.js 개발에 더욱 익숙해지길 바랍니다.

#React.js #실시간채팅