| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 컴퓨터공학
- 이슈
- 자바스크립트
- react
- 웹
- CSS
- BFS
- 클라우드
- TypeScript
- docker
- 파이썬
- kubernetes
- 이더리움
- 쿠버네티스
- 타입스크립트
- 블록체인
- 가상화
- node.js
- k8s
- 백엔드
- 프론트엔드
- AWS
- 솔리디티
- 백준
- es6
- 알고리즘
- HTML
- 리액트
- next.js
- JavaScript
- Today
- Total
즐겁게, 코드
Portal 사용하기 본문
기본 설정으로 리액트 프로젝트를 구성했다면 index.js 파일에서 아래 코드를 본 적 있을 것이다.
ReactDOM.render(<App />, document.getElementById('root'));이는 public 폴더에 존재하는 HTML 문서 중 id = "root" 인 요소의 자식으로 App 컴포넌트를 렌더링한다는 의미인데, 가끔은 여러 이유로 부모 컴포넌트를 벗어난 곳에 자식 컴포넌트를 배치해야 할 때가 있다.
예를 들면 모바일 화면에서 드로어(측면 메뉴)를 만들 때 드로어는 화면 위를 덮으므로 DOM 상에서도 최상단에 위치하는 것이 자연스럽다.
그러나 위의 ReactDOM.render() 함수로 인해 드로어는 언제나 root의 자식 요소로 배치되게 되는데, 포탈(portal)을 활용하면 부모 요소 바깥에도 컴포넌트를 렌더링할 수 있게 된다.
[포탈 사용법]
ReactDOM.createPortal(<엘리먼트 />, 배치할 DOM 식별자);포탈은 ReactDOM.render() 와 동일한 방법으로 사용하며, 부모 요소에 구애받지 않고 원하는 위치에 요소를 배치할 수 있게 된다.
[사용 예시]
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="drawer"></div>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
...
-->
</body>위의 드로어를 root의 자식이 아닌 형제 요소로 렌더링하기 위해 id = "drawer" 라는 형제 요소를 생성한 모습이다.
이제 리액트 컴포넌트에서 포탈을 생성해 보자.
import React from "react";
import ReactDOM from "react-dom";
function SideDrawer({ children }) {
const content = <aside className="side-drawer">{children}</aside>;
return ReactDOM.createPortal(content, document.getElementById("drawer"));
}
export default SideDrawer;
jsx로 작성된 컴포넌트의 내용을 content라는 변수에 담은 후 ReactDOM.createPortal()을 활용해 id = "drawer" 라는 요소에 렌더링했다.
이제 <SideDrawer /> 컴포넌트를 어디서 사용하든 id = "drawer" 의 자식 요소로 렌더링되는 것을 확인할 수 있다.
DOM 구조를 시맨틱하게 유지하고 싶거나 CSS 사용에 제약이 따를 때 사용하면 좋은 기법이니, 꼭 알아두도록 하자.
'🎨 프론트엔드 > React.js' 카테고리의 다른 글
| useContext 훅에 대하여 (0) | 2021.01.05 |
|---|---|
| useRef 훅에 대하여 (1) | 2021.01.01 |
| useMemo 훅에 대하여 (0) | 2020.12.30 |
| useEffect 훅에 대하여 (1) | 2020.12.28 |
| useState 훅에 대하여 (0) | 2020.12.28 |
