자바스크립트와 React.js로 구현한 실시간 채팅 애플리케이션 만들기

09 Nov 2023

reactjs

최근에는 실시간 채팅 애플리케이션의 인기가 계속해서 증가하고 있습니다. 이번 글에서는 자바스크립트와 React.js를 사용하여 실시간 채팅 애플리케이션을 만드는 방법에 대해 알아보겠습니다.

개요

이번 프로젝트에서는 다음과 같은 주요 기능을 가진 실시간 채팅 애플리케이션을 만들어보겠습니다:

사용자가 메시지를 입력하고 전송할 수 있는 채팅 인터페이스
실시간으로 다른 사용자가 보내는 메시지를 표시하는 채팅 메시지 목록
백엔드와의 데이터 통신을 위한 웹소켓을 사용한 실시간 반응성

준비하기

프로젝트를 시작하기 전에 다음과 같은 준비물이 필요합니다:

Node.js와 npm이 설치된 개발 환경
Create React App을 사용하여 React.js 프로젝트를 초기화
웹소켓을 지원하는 백엔드 서버 (예: Socket.io)

프로젝트 설정

React.js 프로젝트를 시작하기 위해 터미널에서 다음 명령을 실행합니다:

npx create-react-app chat-app

프로젝트 디렉토리로 이동한 후, 웹소켓 라이브러리를 설치합니다:

cd chat-app
npm install socket.io-client

src 디렉토리에 Chat.js 파일을 생성하고 다음 코드를 추가합니다:

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

const socket = io('http://localhost:3000'); // 웹소켓 서버 주소에 맞게 변경

const Chat = () => {
  const [messages, setMessages] = useState([]);
  const [inputValue, setInputValue] = useState('');

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

  const handleSubmit = (event) => {
    event.preventDefault();
    socket.emit('chat message', inputValue);
    setInputValue('');
  };

  return (
    <div>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message}</li>
        ))}
      </ul>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={inputValue}
          onChange={(event) => setInputValue(event.target.value)}
        />
        <button type="submit">Send</button>
      </form>
    </div>
  );
};

export default Chat;

src 디렉토리의 App.js 파일을 다음과 같이 수정합니다:

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

const App = () => {
  return (
    <div>
      <h1>Chat App</h1>
      <Chat />
    </div>
  );
};

export default App;

프로젝트를 실행하기 위해 터미널에서 다음 명령을 실행합니다:

npm start

애플리케이션이 성공적으로 실행되면 브라우저에서 “Chat App”이라는 텍스트와 메시지를 입력할 수 있는 입력 상자가 나타납니다. 웹소켓 서버에 연결되어 다른 클라이언트로부터 오는 메시지도 표시됩니다.

마무리

이제 자바스크립트와 React.js로 실시간 채팅 애플리케이션을 구현하는 방법을 알게 되었습니다. 이제 이 애플리케이션을 더 발전시켜 사용자 인증, 다른 채팅방, 이미지 공유 등의 기능을 추가할 수 있습니다.

이 글이 도움이 되었기를 바라며, 관련 코드와 자세한 설명은 GitHub에서 확인할 수 있습니다.

#javascript #reactjs