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

06 Nov 2023

customhook

커스텀 후크는 리액트에서 상태와 라이프사이클 기능을 재사용하기 위해 제공되는 기능입니다. 이번 블로그 포스트에서는 이 커스텀 후크를 사용하여 채팅 기능을 추가하는 방법을 알아보겠습니다.

채팅 컴포넌트 생성

먼저, 채팅 컴포넌트를 생성해야합니다. 이 컴포넌트는 채팅창과 메세지 입력창으로 구성될 것입니다. 컴포넌트를 생성하고 기본적인 HTML 구조를 작성해봅시다.

import React from 'react';

const Chat = () => {
  return (
    <div>
      <div className="chat-window">
        {/* 채팅 메세지들을 보여줄 부분 */}
      </div>
      <input type="text" className="message-input" />
      <button className="send-button">Send</button>
    </div>
  );
}

export default Chat;

채팅 상태 관리

이제, 채팅 상태를 관리하기 위한 커스텀 후크를 만들어보겠습니다. 이 후크는 메세지들을 저장하고 새로운 메세지를 추가하는 기능을 제공할 것입니다. 컴포넌트와 같은 폴더에 useChat.js 파일을 생성하고 다음과 같이 작성해주세요.

import { useState, useEffect } from 'react';

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

  const addMessage = (message) => {
    setMessages([...messages, message]);
  }

  return {
    messages,
    addMessage,
  };
}

export default useChat;

위의 useChat 후크는 messages라는 상태와 addMessage라는 함수를 반환합니다. addMessage는 새로운 메세지를 messages 상태에 추가하는 역할을 합니다.

채팅 컴포넌트 수정

이제 채팅 컴포넌트를 수정하여 커스텀 후크를 사용할 수 있게끔 만들어봅시다. Chat 컴포넌트를 다음과 같이 수정해주세요.

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

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

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  }

  const handleSendClick = () => {
    addMessage(inputValue);
    setInputValue('');
  }

  return (
    <div>
      <div className="chat-window">
        {messages.map((message, index) => (
          <div key={index} className="message">
            {message}
          </div>
        ))}
      </div>
      <input type="text" className="message-input" value={inputValue} onChange={handleInputChange} />
      <button className="send-button" onClick={handleSendClick}>Send</button>
    </div>
  );
}

export default Chat;

위의 코드에서는 useChat 후크를 이용하여 messages 상태와 addMessage 함수를 가져옵니다. 채팅창에는 messages 상태를 매핑하여 메세지를 보여줍니다. 또한, inputValue 상태를 커스텀 후크를 통해 전달받은 addMessage 함수에 전달하여 새로운 메세지를 추가할 수 있도록 합니다.

사용 예제

이제 커스텀 후크를 사용해서 채팅 컴포넌트를 사용할 수 있습니다.

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

const App = () => {
  return (
    <div>
      <h1>Welcome to My Chat App!</h1>
      
      <Chat />
    </div>
  );
}

export default App;

위의 예제에서는 Chat 컴포넌트를 간단히 사용하여 채팅창을 생성합니다.

이제 커스텀 후크를 사용한 채팅 기능을 추가하였습니다. 이를 통해 리액트 컴포넌트에서 상태와 라이프사이클을 관리하는 방법에 대해 알아보았습니다.

#리액트 #채팅