React에서 팝업 창 열기 및 통신 방법 (TypeScript 사용)

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

React 및 TypeScript를 사용하는 프론트엔드 개발자 (중간 난이도)

핵심 요약

• 팝업 창 열기: window.open()을 사용해 특정 너비/높이로 팝업 창 열기
• 통신 방법: postMessage를 통해 부모 앱과 팝업 간 데이터 전송
• 종료 감지: setInterval을 통해 팝업 종료 여부 모니터링
• 핵심 코드: useEffect, useRef, useState 활용한 상태 관리 및 이벤트 핸들링

섹션별 세부 요약

1. 팝업 창에서 메시지 수신 처리

• message 이벤트 리스너 등록
• event.origin 검증으로 보안 강화
• setMessage(event.data)를 통해 수신된 데이터 상태 업데이트

2. 부모 앱에서 팝업 열기 및 메시지 전송

• window.open() 사용 시 width, height, left, top 위치 지정
• postMessage('Hello from parent!', window.origin)을 통해 팝업으로 데이터 전송
• useRef로 Window 객체와 타이머 참조 관리

3. 팝업 종료 감지 로직

• setInterval을 통해 500ms 간격으로 팝업 상태 확인
• popupRef.current?.closed 조건 검사 후 종료 알림 및 상태 업데이트
• clearInterval로 리소스 누수 방지

4. React Router 사용 시 팝업 라우팅

• /popup 경로로 팝업 컴포넌트 라우팅 설정
• BrowserRouter 또는 HashRouter와 호환 가능

결론

• postMessage와 setInterval을 결합해 안정적인 팝업 통신 구현
• useEffect로 이벤트 리스너 정리 및 useRef로 상태 관리 강화
• TypeScript 타입 정의로 코드 안정성과 확장성 확보