[React] ReactPortal 이용하여 modal 창 생성

Introduction

ReactDOM 에서 제공하는 createPortal 메소드를 사용하여 모달창을 생성하는 법을 알아보려 한다.

 

Portals란?

Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 방법이다.

즉, cildren 이 부모 컴포넌트의 DOM 계층 구조에 종속되지 않도록 컴포넌트를 렌더링 할 수 있다는 것이다.

이런 특성을 이용하여 독립적인 모달창을 생성할 수 있다.

기본 형태

ReactDOM.createPortal(child, container)

1. 첫 번째 인자

• 렌더링하려는 children

2. 두 번째 인자

• 이동시키려는 DOM

 

구현 방법

① 모달 창이 구현될 부분에 태그를 작성한다.

index.html 파일

② Portal을 생성해주고, 그 안에 해당 컴포넌트를 삽입한다.

☞ 위 코드처럼 ReactDOM.createPortal(이동할 컴포넌트, 이동할 위치) 를 입력해주면 해당 컴포넌트가 1번에서 작성한 위치로 이동하여 작동한다.

 

실행 결과

모달창이 제대로 작동하는 것을 볼 수 있다.

결론적으로 실행 결과는 동일하지만 DOM 내부에 존재하는 코드를 z-index 등을 이용하여 모달창을 띄우는 것이 아니라,

DOM 계층 구조와는 독립적으로 모달창을 띄울 수 있다.