Javascript, React에서 새창이 닫힐때 특정기능을 실행하려면?

새 창을 열고 닫힐 때 특정 기능을 실행하는 방법 ?

웹 사이트를 개발하다 보면, 사용자의 편의성을 높이기 위해 새창을 열고, 해당창이 닫힐 때 특정 동작을 수행하고 싶을 때가 있습니다. 이번 포스팅에서는 이러한 상황을 'React'를 활용해 어떻게 구현할 수 있는지 알아보도록 하겠습니다.

 

먼저 기본이 되는 몇 가지 JavaScript 메소드에 대해 알아보겠습니다:

 

• window.open() : 새 창을 여는 메소드로, 이를 통해 반환받은 창 객체 참조를 저장할 수 있습니다.
• setInterval() : 주기적으로 코드를 실행하게 해주는 타이머 함수입니다.
• windowObject.closed : 창이 닫혔는지 확인하는 속성으로, 창이 닫히면 true를 반환합니다.
• clearInterval() : 기능을 사용하여 메모리 누수를 방지하려면 상위 구성 요소가 마운트 해제될 때 간격을 지워야 합니다

code_developer

 

---

 

반응형

 

---

 

그럼 전체 코드를 한번 봅시다.

 

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 대모험 아직 끝나지 않았습니다.

언제나 공부하는 마음으로 새로운 언어, 새로운 환경에 적응해 나가길 바랍니다.

그럼 다음 또 다른 포스팅으로 찾아 뵙겠습니다~