[자바스크립트] 웹에서 부모창과 자식창 간에 데이터 교환

웹에서 부모창과 자식창 간에 데이터를 교환하는 방법에는 여러 가지가 있습니다. 주요 방법들을 정리하면 다음과 같습니다.

---

1. window.opener 사용 (부모 → 자식)

자식 창을 window.open()으로 열었을 경우, window.opener를 이용하여 부모창의 데이터를 자식창에서 접근할 수 있습니다.

✅ 부모 창에서 자식 창 열기:

let childWindow = window.open('child.html', 'ChildWindow', 'width=600,height=400');
childWindow.someData = "Hello from Parent";

✅ 자식 창에서 부모 창의 데이터 접근:

if (window.opener) {
    console.log(window.opener.someData); // "Hello from Parent"
}

---

2. window.postMessage 사용 (안전한 데이터 교환)

보안이 중요한 경우 postMessage()를 사용하여 데이터를 주고받을 수 있습니다.

✅ 부모 창에서 자식 창으로 데이터 전송:

let childWindow = window.open('child.html', 'ChildWindow', 'width=600,height=400');

childWindow.onload = function() {
    childWindow.postMessage({ message: "Hello from Parent" }, "*"); 
};

✅ 자식 창에서 메시지 수신:

window.addEventListener("message", (event) => {
    console.log(event.data.message); // "Hello from Parent"
});

✅ 자식 창에서 부모 창으로 데이터 전송:

window.opener.postMessage({ response: "Hello Parent" }, "*");

✅ 부모 창에서 자식의 메시지 수신:

window.addEventListener("message", (event) => {
    console.log(event.data.response); // "Hello Parent"
});

---

3. localStorage 또는 sessionStorage 사용

브라우저의 localStorage 또는 sessionStorage를 이용하면 부모와 자식 창이 데이터를 공유할 수 있습니다.

✅ 부모 창에서 데이터 저장:

localStorage.setItem("sharedData", "Hello from Parent");

✅ 자식 창에서 데이터 읽기:

let data = localStorage.getItem("sharedData");
console.log(data); // "Hello from Parent"

📌 주의: localStorage는 브라우저의 storage 이벤트가 트리거되지 않으면 자동으로 업데이트되지 않으므로, storage 이벤트를 활용할 수도 있습니다.

window.addEventListener("storage", (event) => {
    if (event.key === "sharedData") {
        console.log("Updated Data:", event.newValue);
    }
});

---

4. BroadcastChannel 사용 (다중 창 간 실시간 데이터 공유)

여러 개의 창(탭)과 데이터를 주고받을 경우, BroadcastChannel을 사용할 수 있습니다.

✅ 부모 창에서 데이터 전송:

const channel = new BroadcastChannel("dataChannel");
channel.postMessage({ message: "Hello from Parent" });

✅ 자식 창에서 데이터 수신:

const channel = new BroadcastChannel("dataChannel");
channel.onmessage = (event) => {
    console.log(event.data.message); // "Hello from Parent"
};

---

🔥 어떤 방법을 선택해야 할까?

방법 설명 보안 사용 예시

window.opener	간단한 데이터 공유	낮음	부모가 직접 연 자식 창
postMessage	안전한 메시지 전달	높음	도메인이 다를 때
localStorage/sessionStorage	저장된 데이터 공유	중간	새로고침 후에도 유지
BroadcastChannel	다중 창(탭) 실시간 동기화	중간	여러 개의 창이 열려 있을 때

---

📌 결론

• 보안이 중요하면 postMessage
• 간단한 데이터 전달은 window.opener
• 다중 창 실시간 데이터 공유는 BroadcastChannel
• 영구 저장이 필요하면 localStorage 또는 sessionStorage