React와 TypeScript로 팝업 창 통신 구현하기: `postMessage` 및 `setInterval` 활용 가이드

핵심 기술: 본 문서는 React 함수 컴포넌트와 TypeScript를 사용하여 브라우저 팝업 창을 열고, postMessage API를 통해 부모 창과 팝업 창 간의 안전한 양방향 통신을 구현하는 방법을 상세히 설명합니다. 또한, setInterval을 활용하여 팝업 창의 닫힘 여부를 감지하는 기법을 다룹니다.

기술적 세부사항:

• 팝업 창 열기: window.open() 메서드를 사용하여 특정 크기와 위치로 팝업 창을 엽니다. React의 useRef를 사용하여 팝업 창 객체를 관리합니다.
• 부모 -> 팝업 데이터 전송: popupRef.current?.postMessage(message, window.origin)를 사용하여 부모 창에서 팝업 창으로 데이터를 비동기적으로 전달합니다.
• 팝업 -> 부모 데이터 수신: 팝업 창에서는 window.addEventListener('message', handleMessage)를 통해 부모 창으로부터 전달된 메시지를 수신하고 처리합니다. event.origin을 검증하여 보안을 강화합니다.
• 팝업 닫힘 감지: setInterval을 사용하여 주기적으로 팝업 창의 closed 속성을 확인하고, 창이 닫혔을 경우 타이머를 해제하고 상태를 업데이트합니다.
• 타입 안전성: TypeScript를 활용하여 MessageEvent 등의 타입을 명확히 정의하고 코드의 안정성과 가독성을 높입니다.
• 코드 구조: 팝업 컴포넌트(PopupPage.tsx)와 메인 앱 컴포넌트(App.tsx)로 분리하여 모듈화된 구현을 보여줍니다.

개발 임팩트: 이 가이드라인을 따르면 외부 서비스 연동, 인증 처리, 복잡한 UI 작업 분리 등 팝업 창이 필요한 다양한 시나리오에서 안정적이고 효율적인 통신 로직을 쉽게 구현할 수 있습니다. TypeScript를 통한 타입 안정성은 디버깅 시간을 단축하고 코드 유지보수성을 향상시킵니다.

커뮤니티 반응: 언급되지 않음.

톤앤매너: 실무에서 바로 적용 가능한 구체적인 코드 예시와 함께 기술적인 설명을 제공하며, 명확하고 전문적인 톤을 유지합니다.