🖍️ 구독이란 무엇일까?

• React 구성 요소를 외부 데이터 소스에 연결하는 프로세스를 의미

• 시간이 지남에 따라 해당 데이터의 변경 사항에 반응 필요

• 여기에는 웹 소켓, 데이터 가져오기 서비스, 사용자 정의 이벤트 시스템 또는 기타 동적 데이터 소스에 대한 구독이 포함

• UseEffect 를 사용

  • useEffect 후크는 일반적으로 기능 구성 요소의 구독을 관리하는 데 사용
  • 구독 설정 및 해제를 포함한 부작용을 수행

import React, { useState, useEffect } from 'react';

function ChatComponent() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    // Function to call when a new message is received
    const handleNewMessage = (newMessage) => {
      setMessages((prevMessages) => [...prevMessages, newMessage]);
    };

    // Subscribe to the chat service
    chatService.subscribe(handleNewMessage);

    // Specify how to clean up after this effect
    return () => {
      chatService.unsubscribe(handleNewMessage);
    };
  }, []); // The empty array means this effect runs once on mount and cleanup on unmount

  return (
    <ul>
      {messages.map((message, index) => (
        <li key={index}>{message}</li>
      ))}
    </ul>
  );
}

구독을 사용하는 이유는?

• A. ⭐ 실시간 데이터 외부 소스를 다룰 때만!!!!

• 구독은 실시간 애플리케이션이나 데이터가 자주 업데이트되고 이러한 업데이트를 UI에 즉시 반영하려는 상황에 유용

• 일반적인 사용 사례에는 채팅 애플리케이션, 실시간 스포츠 점수, 주식 시세 표시기 또는 기타 동적 데이터 소스가 포함

• 라이브 채팅, 게임 또는 주식 거래 플랫폼과 같은 진정한 실시간 애플리케이션의 경우 즉각적인 데이터 업데이트를 보장하려면 WebSocket 또는 유사한 기술을 통한 직접 구독 메커니즘이 필요

구독과 외부 모듈 Import 가 다른 것?

• 구독은 동적
• 모듈 Import 는 정적
  
  
• 구독은 데이터 흐름, 특히 업데이트와 실시간 데이터를 다룸
• 모듈 Import 는 코드 재사용 및 기능 확장
  
  
• 구독을 관리하려면 메모리 누수와 같은 문제 방지를 위해 수신 구성 요소의 수명 주기에 주의 필요
• 모듈 Import 는 리소스의 적절한 관리만 필요

구독이 필요하지 않은 경우는

• 실시간 변경이 필요 없을 때
• 약간의 지연을 허용 할 때

실시간 데이터 베이스 유형

• WebSockets
• 서버전송이벤트 (SSE)
• GraphQL (실시간 데이터 업데이트 구독 기능 제공)
• Firebase 실시간 DB
• MQTT