[React] 웹페이지 간의 통신 (window.open, window.opener.postMessage)

window.open,

window.addEventListener

window.opener.postMessage

를 통해 아래와 같이 페이지 간 메시지를 주고 받을 수 있습니다.

 

 

부모 페이지 (window.open 호출)

import { useEffect, useState } from 'react';

const PostMessageExample = () => {
  const [msg, setMsg] = useState([]);

  useEffect(() => {
    //다른 웹 페이지를 띄웁니다.
    const w = window.open(
      'http://172.18.144.1:3001',
      'popup',
      'width=500, height=500'
    );

    const listen = (message) => {
      console.log('받은 메시지 : ', message);
      if (message?.data?.msg) {
        setMsg((prev) => {
          return [...prev, message.data.msg];
        });
      }

      //메시지가 종료 플래그면 이벤트를 제거해줍니다.
      if (message?.data?.msg === 'end bye!') {
        console.log('이벤트 제거!');
        window.removeEventListener('message', listen);
      }
    };

    window.addEventListener('message', listen, false);

    //윈도우 닫히는 것을 확인합니다.
    //메시지를 통해서도 제어 가능!
    const timer = setInterval(() => {
      if (w.closed) {
        clearInterval(timer);
      }
    }, 1000);

    return () => {
      console.log('메시지 및 타이머 제거!!');
      if (timer) {
        clearInterval(timer);
      }
      window.removeEventListener('message', listen);
    };
  }, []);

  return (
    <div>
      <div>
        <div>
          {msg.map((item, idx) => {
            return <div key={idx}>{item}</div>;
          })}
        </div>
      </div>
    </div>
  );
};

export default PostMessageExample;

 

 

open 되는 페이지 (window.opener를 통해 open한 곳에 값 전달)

import { useEffect, useState } from 'react';

const Home = () => {
  const [input, setInput] = useState('');

  useEffect(() => {
    //윈도우가 종료 될 때 메시지를 보냅니다.
    window.onbeforeunload = () => {
      //*는 CORS의 origin 에 대한 값
      window.opener.postMessage({ msg: 'end bye!' }, '*');
    };
  }, []);

  return (
    <div>
      <div>
        <input
          type="text"
          value={input}
          onChange={(e) => {
            setInput(e.target.value);
          }}
        />
        <button
          onClick={() => {
            window.opener.postMessage({ msg: input }, '*');
            setInput('');
          }}
        >
          보내기
        </button>
      </div>
    </div>
  );
};

export default Home;