BroadcastChannel API를 활용해서 서로 다른 컨텍스트 간에 커뮤니케이션 하기

const broadcastChannel = new BroadcastChannel(CHANNEL_NAME);

const sendBroadcastChannel = new BroadcastChannel(CHANNEL_NAME);
// 구조적 복제가 가능한 데이터만 전송
sendBroadcastChannel.postMessage({
  type: "USER_ACTION",
  payload: { id: 1, timestamp: Date.now() },
});

const receiveBroadcastChannel = new BroadcastChannel(CHANNEL_NAME);
 
const messageHandler = (event: MessageEvent) => {
  const { type, payload } = event.data;
  console.log("Received:", payload);
};
 
// 이벤트 리스너 등록
receiveBroadcastChannel.addEventListener("message", messageHandler);
 
// 이벤트 리스너 제거
receiveBroadcastChannel.removeEventListener("message", messageHandler);
receiveBroadcastChannel.close();

const receiveBroadcastChannel = new BroadcastChannel(CHANNEL_NAME);
 
receiveBroadcastChannel.onmessage = (event) => {
  const { type, payload } = event.data;
  console.log("Received:", payload);
};

// hooks/useBroadcastChannel.tsx
 
import { useEffect, useRef, useState } from "react";
 
/**
 * 메시지 타입 정의
 * @template T - 메시지 페이로드의 타입
 * @property type - 메시지의 종류를 구분하는 문자열
 * @property payload - 실제 전달할 데이터
 */
type Message<T = unknown> = {
  type: string;
  payload: T;
};
 
/**
 * BroadcastChannel Hook의 반환 타입
 * @template T - 메시지 페이로드의 타입
 * @property postMessage - 메시지를 전송하는 함수
 * @property data - 수신된 최신 메시지
 * @property openNewTab - 새 탭을 여는 유틸리티 함수
 */
type BroadcastChannelHook<T> = {
  postMessage: (message: Message<T>) => void;
  data: Message<T> | null;
  openNewTab: (path?: string) => void;
};
 
// 채널 이름 상수 정의
const CHANNEL_NAME = "app-communication";
 
/**
 * BroadcastChannel을 React에서 쉽게 사용할 수 있게 해주는 Custom Hook
 * @template T - 메시지 페이로드의 타입 파라미터
 * @returns {BroadcastChannelHook<T>} Hook의 반환값
 *
 * @example
 * ```tsx
 * const { postMessage, data, openNewTab } = useBroadcastChannel<UserAction>();
 *
 * // 메시지 전송
 * postMessage({ type: 'USER_LOGIN', payload: { userId: '123' } });
 *
 * // 새 탭 열기
 * openNewTab('/auth');
 * ```
 */
export const useBroadcastChannel = <
  T = unknown,
>(): BroadcastChannelHook<T> => {
  // BroadcastChannel 인스턴스를 참조로 관리
  // useRef를 사용하여 리렌더링 간에 인스턴스 유지
  const channelRef = useRef<BroadcastChannel | null>(null);
 
  // 수신된 최신 메시지를 상태로 관리
  const [data, setData] = useState<Message<T> | null>(null);
 
  /**
   * 메시지를 다른 탭으로 전송하는 함수
   * @param message - 전송할 메시지 객체
   */
  const postMessage = (message: Message<T>) => {
    if (!channelRef.current) return;
 
    try {
      channelRef.current.postMessage(message);
    } catch (error) {
      console.error("Failed to post message:", error);
    }
  };
 
  /**
   * 새 탭을 여는 유틸리티 함수
   * @param path - 새 탭에서 열 경로
   */
  const openNewTab = (path) => {
    // noopener,noreferrer로 보안 취약점 방지
    window.open(path, "_blank", "noopener,noreferrer");
  };
 
  useEffect(() => {
    // 컴포넌트 마운트 시 BroadcastChannel 인스턴스 생성
    if (!channelRef.current) {
      channelRef.current = new BroadcastChannel(CHANNEL_NAME);
    }
 
    /**
     * 메시지 수신 이벤트 핸들러
     * @param event - MessageEvent 객체
     */
    const messageHandler = (event: MessageEvent) => {
      try {
        setData(event.data as Message<T>);
      } catch (error) {
        console.error("Failed to process message:", error);
      }
    };
 
    // 메시지 이벤트 리스너 등록
    channelRef.current.addEventListener("message", messageHandler);
 
    // 클린업 함수: 컴포넌트 언마운트 시 실행
    return () => {
      // 이벤트 리스너 제거 및 채널 정리
      channelRef.current?.removeEventListener("message", messageHandler);
      channelRef.current?.close();
      channelRef.current = null;
    };
  }, []); // 빈 의존성 배열로 마운트/언마운트 시에만 실행
 
  return { postMessage, data, openNewTab };
};

// components/Home.tsx
import { useBroadcastChannel } from "@/hooks/useBroadcastChannel";
import { useCallback } from "react";
 
type UserAction = {
  userId: string;
  action: "login" | "logout";
  timestamp: number;
};
 
export default function Home() {
  const { data, openNewTab } = useBroadcastChannel<UserAction>();
 
  const handleNewTab = useCallback(() => {
    openNewTab("/auth");
  }, [openNewTab]);
 
  return (
    <div className="p-4">
      <div className="mb-4">
        {data && (
          <div className="rounded-lg bg-gray-100 p-4">
            <h3 className="font-semibold">수신된 사용자 액션:</h3>
            <pre className="mt-2 text-sm">{JSON.stringify(data, null, 2)}</pre>
          </div>
        )}
      </div>
      <button
        onClick={handleNewTab}
        className="rounded-md bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
      >
        인증 창 열기
      </button>
    </div>
  );
}