[JavaScript/React] 다른 탭 간에 데이터 공유하기(postMessage)

프로젝트 중 다른 탭 간의 데이터를 공유하는 기능이 필요했다.

 

window.postMessage 혹은 BroadcastChannel.postMessage를 통해 데이터를 공유할 수 있다.

window.postMessage는 다른 도메인 간에도 전송이 가능하고(보안을 위해 origin을 설정하는 것이 좋다), 특정 탭에만 전송이 가능하다. 아래와 같은 코드이다.

const subWindow = window.open("/test", "_blank");
subWindow.postMessage("hello", "*");

 

BroadcastChannel.postMessage는 channel을 구독하고 있으면 다수의 탭에도 메시지 전송이 가능하고, 같은 도메인에서만 전송이 가능하다.

 

아래는 BroadcastChannel.postMessage 를 사용한 코드 예시이다.

// 메인 탭

const channel = new BroadcastChannel("option");

useEffect(() => {
    // 서브 탭 열기
    const subWindow = window.open("/test", "_blank");

    // 서브 탭이 열리면 곧바로 hello라는 메시지 보내기
    if (subWindow) {
        subWindow.onload = () => {
            channel.postMessage("hello");
        }
    }
}, []);

// props.option이 변경될 때마다 메시지 전송
useEffect(() => {
    channel.postMessage(props.option);
}, [props.option]);

// 서브 탭

export const Test = () => {
    useEffect(() => {
        const channel = new BroadcastChannel("option");
        
        channel.onmessage = (event) => {
            console.log(event.data);
        }
        
        // 컴포넌트 언마운트 시 채널을 닫아 리소스 정리
        return () => channel.close();
    }, []);
    
    return <div>Test</div>
}

 

용도에 따라 잘 사용해보자. 웬만한 경우에는 BroadcastChannel API를 사용하게 될 것 같지만...