Custom Hook을 활용한 소켓 통신 구현

06 Nov 2023

reactjs

이번 포스트에서는 React Native 앱에서 소켓 통신을 구현할 때 Custom Hook을 활용하는 방법에 대해 알아보겠습니다.

소켓 통신이란?

소켓 통신은 클라이언트와 서버 간에 양방향 통신을 가능하게 해주는 방법입니다. 이를 통해 실시간 데이터 전송이 가능하고, 앱에서 채팅, 실시간 알림 등을 구현할 수 있습니다.

Custom Hook이란?

Custom Hook은 React 컴포넌트 로직을 재사용하기 위한 방법입니다. 이를 통해 소켓 통신과 관련된 로직을 간단하게 재사용할 수 있습니다.

Custom Hook 작성하기

아래는 소켓 통신을 위한 Custom Hook의 예시입니다.

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

const useSocket = (url) => {
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    const newSocket = SocketIOClient(url);
    setSocket(newSocket);

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

  return socket;
};

export default useSocket;

위의 예시에서는 useEffect를 통해 소켓을 연결하고, 컴포넌트가 언마운트될 때 해당 소켓을 disconnect 해줍니다. 소켓 객체는 useState를 통해 상태로 관리되며, return 구문을 통해 컴포넌트에서 해당 소켓을 사용할 수 있게 반환됩니다.

사용 예시

Custom Hook을 이용해 소켓 통신을 구현하는 예시입니다.

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

const ChatComponent = () => {
  const socket = useSocket('http://example.com');

  useEffect(() => {
    if (socket) {
      socket.on('message', (data) => {
        // 소켓으로부터 받은 메시지 처리 로직
      });
    }
  }, [socket]);

  const sendMessage = (message) => {
    if (socket) {
      socket.emit('message', message);
    }
  };

  return (
    <div>
      {/* 채팅 화면 및 입력 컴포넌트 */}
    </div>
  );
};

export default ChatComponent;

위의 예시에서는 useSocket을 이용해 소켓 객체를 얻어온 후, 해당 소켓 객체를 이용하여 메시지 수신 및 송신 로직을 구현합니다.

마무리

위의 예시를 참고하여 Custom Hook을 활용하여 React Native 앱에서 소켓 통신을 구현할 수 있습니다. Custom Hook을 이용하면 코드 재사용성과 가독성을 높일 수 있으며, 소켓 통신과 같은 복잡한 로직을 보다 간편하게 다룰 수 있습니다.

#React #ReactNative #소켓통신