Custom Hook을 사용한 실시간 채팅 기능 추가

06 Nov 2023

reactjs

실시간 채팅 기능은 웹 애플리케이션에서 매우 인기 있는 기능 중 하나입니다. 이번 포스트에서는 React 애플리케이션에서 custom hook을 사용하여 실시간 채팅을 구현하는 방법에 대해 알아보겠습니다.

Custom Hook이란?

Custom Hook은 React 함수 컴포넌트에서 상태 관리나 부작용 로직을 재사용하기 위해 사용되는 기능입니다. Custom Hook은 기본적으로 “use”라는 이름으로 시작하며, useState, useEffect 등과 같은 기본 Hook을 기반으로 작성할 수 있습니다. 이를 통해 React 로직을 간결하게 유지하면서도 재사용성을 높일 수 있습니다.

실시간 채팅 기능 추가하기

1. 필요한 패키지 설치하기

먼저, 실시간 채팅 기능을 구현하기 위해 필요한 패키지를 설치해야 합니다. npm을 사용하여 다음 패키지를 설치하세요:

npm install socket.io-client

2. Custom Hook 작성하기

실시간 채팅 기능을 위한 Custom Hook을 작성합니다. useChat이라는 이름으로 Hook을 작성하겠습니다. 다음과 같이 작성해 보세요:

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

const useChat = () => {
  const [messages, setMessages] = useState([]);
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    // 서버와 소켓 연결
    const newSocket = io(process.env.REACT_APP_SOCKET_URL);
    setSocket(newSocket);

    // 채팅 메시지 수신 이벤트 핸들링
    newSocket.on('chat message', (message) => {
      setMessages((prevMessages) => [...prevMessages, message]);
    });

    // 컴포넌트 언마운트 시 소켓 연결 해제
    return () => {
      newSocket.disconnect();
    };
  }, []);

  // 채팅 메시지 전송 함수
  const sendMessage = (message) => {
    socket.emit('chat message', message);
  };

  return { messages, sendMessage };
};

export default useChat;

위의 코드에서 useEffect를 사용하여 컴포넌트가 마운트될 때 소켓을 생성하고, useEffect의 cleanup 함수에서 소켓 연결을 해제합니다. messages 상태는 받은 메시지들을 저장하고, sendMessage 함수를 통해 메시지를 전송할 수 있습니다.

3. 컴포넌트에서 Custom Hook 사용하기

이제 실제로 실시간 채팅 기능을 사용할 컴포넌트에서 Custom Hook을 사용해 보겠습니다. 다음과 같이 작성해 보세요:

import React, { useState } from 'react';
import useChat from './useChat';

const ChatRoom = () => {
  const [newMessage, setNewMessage] = useState('');
  const { messages, sendMessage } = useChat();

  const handleSendMessage = () => {
    if (newMessage.trim()) {
      sendMessage(newMessage);
      setNewMessage('');
    }
  };

  return (
    <div>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message}</li>
        ))}
      </ul>
      <input
        type="text"
        value={newMessage}
        onChange={(e) => setNewMessage(e.target.value)}
      />
      <button onClick={handleSendMessage}>Send</button>
    </div>
  );
};

export default ChatRoom;

위의 코드에서 useChat Hook을 사용하여 messages와 sendMessage 를 가져와서 사용합니다. 실시간으로 수신된 메시지를 화면에 출력하고, 사용자의 입력을 받아 메시지를 전송할 수 있는 UI를 구현합니다.

마무리

위의 단계를 따라하면 React 애플리케이션에서 custom hook을 사용하여 실시간 채팅 기능을 구현할 수 있습니다. Custom Hook을 사용하면 코드를 간결하게 유지하면서도 반복적인 로직을 재사용할 수 있으므로 개발 생산성을 높일 수 있습니다.

추가로, 이 예제에서 사용한 socket.io 패키지도 다양한 실시간 기능을 추가할 수 있는 강력한 도구입니다. 관련 문서를 참고하시면 더 자세한 사용법을 알 수 있습니다.

#React #실시간채팅