React Portal이란? 왜 사용해야 하는가?

카테고리

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

서브카테고리

웹 개발

대상자

• React 개발자 (모달, 툴팁, 토스트 등 UI 컴포넌트 개발에 어려움을 겪는 개발자)
• 난이도 : 중간 (React 기초 지식 필요)

핵심 요약

• React Portal은 ReactDOM.createPortal()를 사용해 메인 DOM 트리 외부에 컴포넌트를 렌더링할 수 있는 기능
• z-index/overflow 문제 해결 : 부모 DOM 트리의 제약을 벗어나 UI 요소를 자유롭게 배치 가능
• 사용 예시 : Toast, Modal, Dropdown 등 상위 요소와 분리된 UI 컴포넌트 개발에 유리

섹션별 세부 요약

1. React Portal의 기본 개념

• 일반적인 React 렌더링은 부모 DOM 트리 내에서 이루어짐
• 문제점 : z-index, overflow: hidden 등으로 인한 UI 요소의 클리핑(예: 모달이 숨김)
• Portal의 역할 : 메인 DOM 트리 외부로 컴포넌트를 이동시켜 스택 문제 해결

2. Portal 사용 예시: Toast 컴포넌트

• 코드 예시 :

```javascript

ReactDOM.createPortal(

```

• 렌더링 결과 : document.body의 직접 자식 요소로 렌더링됨
• 장점 : #portal-root 같은 별도 컨테이너 필요 없음

3. Portal의 주요 사용 사례 및 팁

• 적용 가능한 컴포넌트 : Modal, Tooltip, Toast, Dropdown
• 주의사항 : 과도한 사용은 DOM 구조 복잡화로 이어질 수 있음
• 실무 팁 : document.body를 직접 사용해 간단한 구조 유지

4. Portal의 실무적 이점

• UI 문제 해결 : 모달이 숨김, z-index 오류 등 해결
• React 연결성 유지 : 상태 및 이벤트 시스템과의 호환성 보장
• 간결한 코드 : 별도 컨테이너 생성 없이 바로 document.body 사용

결론

• React Portal은 z-index/overflow 문제를 해결하고, 자유로운 UI 배치를 가능하게 하는 핵심 기능
• 모달/토스트 등 상위 요소와 분리된 UI 개발 시 필수
• 과도한 사용은 피하고, document.body를 활용해 간결한 구조 유지