[React] React.js 의 popup창에서 부모창의 함수 호출

 

React에서 팝업창으로 오픈하여 데이터를 처리한 후에 부모 창에 있는 함수를 호출하는 상황을 정리합니다.

 

 

 

부모 창에서 버튼을 클릭하였을 경우에 popup.jsp을 새창으로 열고 요소 내부에 기능의 함수를 설정합니다.

 

//부모창

export default function ParentFunc() {

  function popupFunction() {
    let popup = window.open("/popup.jsp", "", 'width=800,height=600');

    window.parentCallback = () => {
      console.log('Hello World!!');
    }
  }
  
   return (
    <div>
        <button variant="info" type="submit" onClick={someFunction}>
            popup button
        </button>
    </div>
   );
}

새창으로 popup.jsp을 열고 ParentFunc() 함수를 호출하였을 경우에 부모 창에 있는 설정되어 있는 parentCallblack() 함수를 호출하게 되면 console에 "Hello World!!"가 표시되게 되고 popup.jsp 창이 닫히게 됩니다. 

//팝업창 함수

export default function ParentFunc() {

    window.opener.parentCallback();
    window.close();

    return (
      <div className="content">
        <p>Parent Page</p>
      </div>
    );
}