모달 만들 때 왜 createPortal 쓰세요?

카테고리

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

서브카테고리

웹 개발

대상자

React 컴포넌트 개발자, UI/UX 개발자

난이도: 중급

핵심 요약

• createPortal 을 사용하면 모달을 DOM 트리의 최상위에 렌더링해 z-index 및 스타일링 제약을 해결할 수 있음
• 리액트 컴포넌트 트리 기준으로 이벤트 버블링이 가능해 외부 클릭 감지 구현이 용이함
• 단점으로는 컴포넌트 구조 복잡성 증가, 접근성(A11y) 및 SSR 환경에서의 이슈 발생 가능

섹션별 세부 요약

1. Portal이 무엇인가요?

• createPortal은 리액트 컴포넌트 트리에서 선언된 요소를 DOM 트리의 다른 위치로 이동시켜 렌더링하는 기능
• 예시 코드: import { createPortal } from 'react-dom';
• DOM 구조는 변경되지만, 리액트 트리 상에서는 여전히 원래 위치에 연결됨

1. 장점

• z-index 및 overflow: hidden 문제 해결: 모달이 부모 컴포넌트의 스타일링 영향을 받지 않음
• 이벤트 버블링 제어: 리액트 트리 기준으로 이벤트가 전파되어 외부 클릭 감지(예: onClickOutside) 구현 가능
• 툴팁, 고정 헤더/푸터 등 다른 UI 요소에도 활용 가능

1. 단점

• 컴포넌트 구조 복잡성 증가: DOM과 리액트 트리 간 불일치로 디버깅이 어려움
• 컨텍스트(Context) 상속 이슈: DOM이 분리되어 있어 컨텍스트 접근이 직관적이지 않음
• 접근성(A11y) 문제: aria-* 속성, 포커스 트랩, ESC 키 닫기 처리 필요
• SSR 환경에서의 처리: document 객체가 없으므로 클라이언트에서만 렌더링해야 함

1. 모달 외 사용 사례

• 툴팁: z-index 문제 해결을 위해 포탈 사용
• 고정 헤더/푸터: 메인 콘텐츠 트리 외부에 렌더링해 레이아웃 간섭 방지

1. 결론

• createPortal은 모달 개발에 필수적인 기능으로, 복잡한 UI 구현 시 효율적임
• 단, 접근성, SSR, 컨텍스트 관리에 대한 추가 로직이 필요함

결론

• *createPortal은 모달 및 툴팁 등 UI 요소의 레이아웃 제약을 해소하는 핵심 기능**으로, 이벤트 버블링 제어와 외부 클릭 감지 구현에 유리하지만, 접근성 및 SSR 환경에서의 처리가 필수적입니다. import { createPortal } from 'react-dom'; 을 사용하여 DOM 트리의 최상위에 렌더링해야 하며, aria-* 속성과 포커스 트랩 처리를 통해 접근성 문제를 해결해야 합니다.