[JS] 자식창(팝업)에서 부모창 함수 동적으로 호출하기

개발을 하다보면 팝업창(자식창)을 만들고, 해당 팝업창에서 모든 작업을 끝낸 후에 기존 창(부모창)에서 결과물을 가지고 함수를 동작시켜야하는 일이 발생한다.

 

<부모창>
function callParentMethod() {
	console.log('함수 호출');
}


<자식창>
opener.callParentMethod();

이런 경우에 보통 위와 같이 opener를 사용하여 부모창의 메소드를 호출한다.

 

 

 

물론 이렇게도 잘 동작하지만, 이런 경우에 IDE에서는 함수를 인식하지 못한다.

이렇게되면 해당 함수를 추적하기 위해서 함수명을 검색을 하는 수고스러움을 더하게 된다.

부모창 메소드를 동적으로 호출하는 공통 로직을 만들어 이런 문제를 해결함과 동시에 좀 더 사용하기 편하게 만들고자 했다.

 

 

 

opener를 console 로그로 찍어보면 위와 같이 나온다.

보면 opener란 Window 객체이며, 함수명이 key이고 value에 해당 함수가 담겨있는 것을 볼 수 있다.

이는 key(함수명)를 이용하여 변수에 value(함수)를 담을 수 있다는 이야기이다.

 

 

 

<팝업 관련 공통 기능>
class POPUP {
  /**
   * @param methodNm - 호출할 부모창 메소드 이름
   * @param param - 매개변수
   */
  static callParentMethod(methodNm, param) {
    const parentMethod = opener[methodNm];
    if (typeof parentMethod != "function") {
      Message.throwMessage('해당 함수가 존재하지 않음. ( 함수명 : ' + methodNm + ' )');
      return;
    }

    parentMethod(param);
  }
}

이를 이용하여 팝업과 관련된 기능을 모아서 사용하기 위해 class를 하나 만든 후, 부모창에서 함수를 호출할 static 함수를 사용했다. 호출할 부모창의 함수명과 해당 함수 호출 시 넘겨줄 정보를 매개변수로 받아 opener에서 해당 함수를 찾은 후 실행한다.

 

 

function selectCustomer() {
  if (currentRowData == null) {
    Message.alertMessage("적용할 고객 정보가 없습니다.", MsgType.INFO);
    return;
  }
  POPUP.callParentMethod('setCustomerInfo', currentRowData);
  window.close();
}

이를 적용해보면 위와 같이 사용한다. 함수명과 매개변수를 넘겨주면 된다.

 

 

 

아까와 다른점은 메소드명만으로 IDE에서 해당 함수를 인식하며, 'Ctrl + 마우스 왼쪽클릭'을 하면 함수로 바로 이동할 수 있어 추적이 용이하다. 이것으로 개발을 한결 더 편하게 할 수 있게 되었다 😉