React에서 팝업 윈도우를 사용하는 방법에는 여러 가지가 있습니다. 여기서는 팝업 윈도우를 생성하고 데이터를 주고받는 예제를 통해 설명하겠습니다.
1. 기본 팝업 윈도우 생성
우선, 팝업 윈도우를 생성하는 가장 기본적인 방법을 살펴보겠습니다. window.open 메서드를 사용하여 새로운 브라우저 창을 열 수 있습니다.
import React, { useState } from 'react';
const PopupExample = () => {
const [popup, setPopup] = useState(null);
const openPopup = () => {
const popupWindow = window.open(
'',
'popupWindow',
'width=600,height=400,scrollbars=yes,resizable=yes'
);
if (popupWindow) {
popupWindow.document.write('<html><head><title>Popup</title></head><body><h1>Popup Content</h1></body></html>');
setPopup(popupWindow);
}
};
const closePopup = () => {
if (popup) {
popup.close();
setPopup(null);
}
};
return (
<div>
<button onClick={openPopup}>Open Popup</button>
<button onClick={closePopup} disabled={!popup}>Close Popup</button>
</div>
);
};
export default PopupExample;
2. 부모와 자식 창 간 데이터 주고받기
부모 창과 팝업 창 간에 데이터를 주고받기 위해서는 window.postMessage와 window.addEventListener를 사용할 수 있습니다.
부모 창에서 데이터 전송 방법
import React, { useState } from 'react';
const PopupWithMessage = () => {
const [popup, setPopup] = useState(null);
const [message, setMessage] = useState('Hello from parent');
const openPopup = () => {
const popupWindow = window.open(
'',
'popupWindow',
'width=600,height=400,scrollbars=yes,resizable=yes'
);
if (popupWindow) {
popupWindow.document.write('<html><head><title>Popup</title></head><body><h1>Popup Content</h1></body></html>');
setPopup(popupWindow);
}
};
const sendMessage = () => {
if (popup) {
popup.postMessage(message, '*');
}
};
return (
<div>
<button onClick={openPopup}>Open Popup</button>
<button onClick={sendMessage} disabled={!popup}>Send Message</button>
<input type="text" value={message} onChange={(e) => setMessage(e.target.value)} />
</div>
);
};
export default PopupWithMessage;
자식 창에서 메시지 수신 -
팝업 창에서 메시지를 수신하기 위해서는 window.addEventListener를 사용하여 message 이벤트를 처리해야 합니다. 다음은 팝업 창의 JavaScript 코드 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>Popup</title>
</head>
<body>
<h1>Popup Content</h1>
<div id="message"></div>
<script>
window.addEventListener('message', (event) => {
const messageElement = document.getElementById('message');
messageElement.innerText = event.data;
});
</script>
</body>
</html>
3. 팝업 창 닫기 감지
팝업 창이 닫혔는지 감지하려면 부모 창에서 주기적으로 팝업 창의 상태를 체크하는 방법을 사용할 수 있습니다.
import React, { useState, useEffect } from 'react';
const PopupWithCloseDetection = () => {
const [popup, setPopup] = useState(null);
useEffect(() => {
const timer = setInterval(() => {
if (popup && popup.closed) {
setPopup(null);
clearInterval(timer);
}
}, 1000);
return () => clearInterval(timer);
}, [popup]);
const openPopup = () => {
const popupWindow = window.open(
'',
'popupWindow',
'width=600,height=400,scrollbars=yes,resizable=yes'
);
if (popupWindow) {
popupWindow.document.write('<html><head><title>Popup</title></head><body><h1>Popup Content</h1></body></html>');
setPopup(popupWindow);
}
};
return (
<div>
<button onClick={openPopup}>Open Popup</button>
<button onClick={() => popup.close()} disabled={!popup}>Close Popup</button>
</div>
);
};
export default PopupWithCloseDetection;
'프로그램 > React-Native' 카테고리의 다른 글
| date.isValid is not a function (1) | 2024.09.06 |
|---|---|
| 리액트 정규식 (0) | 2024.08.14 |
| React 타임워치 (Stopwatch) (1) | 2024.07.23 |
| ERR_MODULE_NOT_FOUND 해결방법 (0) | 2024.06.13 |
| 클라우드 개발환경 구름 ide 회원가입 및 컨테이너 생성 (0) | 2021.02.04 |
