🖍️ 구독이란 무엇일까?
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 가 다른 것?
구독이 필요하지 않은 경우는
- 실시간 변경이 필요 없을 때
- 약간의 지연을 허용 할 때
실시간 데이터 베이스 유형
- WebSockets
- 서버전송이벤트 (SSE)
- GraphQL (실시간 데이터 업데이트 구독 기능 제공)
- Firebase 실시간 DB
- MQTT