modal 썸네일형 리스트형 React Portal로 모달 컴포넌트 구현하기 모달은 렌더링 위치, 포커스, 스크롤 제어 등에서 까다롭습니다. React Portal을 활용하면 모달을 DOM 트리 바깥의 별도 루트로 렌더링하여 레이아웃/스타일 충돌을 피하고, 접근성 요구사항을 충족하기 쉬워집니다. 실무에서 바로 쓸 수 있는 포털 기반 모달 구현을 정리합니다.1. Portal이 필요한 이유모달, 드롭다운, 토스트처럼 화면 위에 떠야 하는 UI는 부모 컴포넌트의 z-index나 overflow에 영향받기 쉽습니다. Portal은 자식 컴포넌트를 별도의 DOM 노드로 렌더링하여 이러한 제약을 제거합니다. 덕분에 오버레이, 스크롤 잠금, 포커스 트랩 같은 모달의 핵심 요구사항을 안정적으로 구현할 수 있습니다.2. Portal 루트 준비HTML에 모달을 위한 루트 노드(div#modal-r.. 더보기 이전 1 다음