728x90
반응형
새 창을 열고 닫힐 때 특정 기능을 실행하는 방법 ?
웹 사이트를 개발하다 보면, 사용자의 편의성을 높이기 위해 새창을 열고, 해당창이 닫힐 때 특정 동작을 수행하고 싶을 때가 있습니다. 이번 포스팅에서는 이러한 상황을 'React'를 활용해 어떻게 구현할 수 있는지 알아보도록 하겠습니다.
먼저 기본이 되는 몇 가지 JavaScript 메소드에 대해 알아보겠습니다:
- window.open() : 새 창을 여는 메소드로, 이를 통해 반환받은 창 객체 참조를 저장할 수 있습니다.
- setInterval() : 주기적으로 코드를 실행하게 해주는 타이머 함수입니다.
- windowObject.closed : 창이 닫혔는지 확인하는 속성으로, 창이 닫히면 true를 반환합니다.
- clearInterval() : 기능을 사용하여 메모리 누수를 방지하려면 상위 구성 요소가 마운트 해제될 때 간격을 지워야 합니다
반응형
그럼 전체 코드를 한번 봅시다.
import React, { useEffect, useState } from 'react';
function ParentComponent() {
const [childWindow, setChildWindow] = useState(null);
// 하위 창이 닫힐 때 실행할 콜백 함수
const onChildClose = () => {
console.log('Child window closed');
// 하위 창이 닫힌 후에 실행할 코드
};
// 하위 창을 여는 기능
const openChildWindow = () => {
const windowFeatures = 'width=600,height=400,resizable,scrollbars=yes,status=1';
const childWin = window.open('/child-path', 'ChildWindow', windowFeatures);
setChildWindow(childWin);
};
useEffect(() => {
let intervalId;
if (childWindow) {
// 매초 자식 창이 닫혀 있는지 확인한다.
intervalId = setInterval(() => {
if (childWindow.closed) {
clearInterval(intervalId);
onChildClose();
}
}, 1000);
}
// 마운트 해제 시 Interval 해제
return () => {
if (intervalId) {
clearInterval(intervalId);
}
};
}, [childWindow]);
return (
<div>
<button onClick={openChildWindow}>Open Child Window</button>
</div>
);
}
export default ParentComponent;
이 코드는 React의 useState와 useEffect 훅을 사용하여 새 창을 열고, 해당 창이 닫힐 때 onChildClose 함수를 실행합니다. setInterval 함수를 사용하여 1초마다 새 창의 상태를 확인하고, 닫힌 경우에는 clearInterval로 타이머를 해제한 후, 콜백 함수를 호출합니다.
이와 같이 구현하면 새 창을 열고 닫힐 때 원하는 기능을 실행할 수 있으며, 이는 웹 애플리케이션의 사용성을 향상시키는 데 도움이 됩니다. 오류나 더 좋은 구현 방법에 대한 의견이 있다면, 피드백을 주시기 바랍니다.
IT 대모험 아직 끝나지 않았습니다.
언제나 공부하는 마음으로 새로운 언어, 새로운 환경에 적응해 나가길 바랍니다.
그럼 다음 또 다른 포스팅으로 찾아 뵙겠습니다~
728x90
반응형
'IT_Web > JavaScript' 카테고리의 다른 글
| JavaScript 모듈 기본값 정의하고 가져오기 - default 키워드 활용법, export, import (0) | 2020.06.08 |
|---|---|
| 자바스크립트 모듈 시스템 이해하기 - 번들링(Bumdling) 웹팩(Webpack) (0) | 2020.06.08 |
| 자바스크립트 모듈 이해하기 - 네임스페이스 (0) | 2020.06.06 |
| Java Script - push() 배열 뒤에 요소 추가하기(추가설명) (0) | 2020.06.04 |
| Java Script - splice - 배열 인덱스로 특정 요소 수정하기 (0) | 2020.06.02 |
