Introduction
ReactDOM 에서 제공하는 createPortal 메소드를 사용하여 모달창을 생성하는 법을 알아보려 한다.
Portals란?
Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 방법이다.
즉, cildren 이 부모 컴포넌트의 DOM 계층 구조에 종속되지 않도록 컴포넌트를 렌더링 할 수 있다는 것이다.
이런 특성을 이용하여 독립적인 모달창을 생성할 수 있다.
기본 형태
ReactDOM.createPortal(child, container)
1. 첫 번째 인자
- 렌더링하려는 children
2. 두 번째 인자
- 이동시키려는 DOM
구현 방법
① 모달 창이 구현될 부분에 태그를 작성한다.
② 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 |