[React] 구독이란 무엇일까?

김현수·2024년 3월 31일
0

React

목록 보기
28/31


🖍️ 구독이란 무엇일까?


  • 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
profile
일단 한다

0개의 댓글