본문 바로가기
Frontend/ReactJS

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

by 모너아링 2023. 2. 19.

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 계층 구조와는 독립적으로 모달창을 띄울 수 있다.

'Frontend > ReactJS' 카테고리의 다른 글

[React] React 반응형 웹  (0) 2023.02.23
[React] 로그인 Refresh Token 처리  (0) 2023.02.22
[React] useNavigate로 데이터 전달  (0) 2023.02.16
[React] 로그인 JWT 토큰 처리  (0) 2023.02.15
[React] Fetch & Axios  (0) 2023.02.05