설명
- react로 개발하다보면 react를 지원하지 않는 library(비react library)를
사용해야할 경우가 생긴다. - 비react library element에 react component를 연동해야할 일이 있다면
react portal을 사용하여 해결할 수 있다.
react portal이란?
- 공식홈페이지 createPortal
- react component를 특정 HTML DOM element 하위로 이동시켜주는 기능이다.
- createPortal() 함수로 포탈노드를 만든 뒤 렌더하면
인자로 받은 react component가 인자로 받은 HTML DOM element 하위로 이동한다. - createPortal() 함수 인자는 react component, HTML DOM element이다.
예시
- 설명
- 과일 목록이 표기된 HTML DOM있다고 가정하자.
- 각 과일 항목에 삭제 버튼 react component를 붙이고자 한다.
- 과일 목록 HTML DOM
1 2 3 4 5 6 7 8 9
export default function Page() { return ( <div> <div>사과</div> <div>배</div> <div>참외</div> </div> ); }
- react portal 적용
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
'use client'; import { useState, useEffect, useRef } from 'react'; import { createPortal } from 'react-dom'; export default function Page() { const fruitsRef = useRef<HTMLDivElement>(null); const [closeButtons, setCloseButtons] = useState<React.ReactPortal[]>([]); useEffect(() => { if (fruitsRef.current) { // 과일 HTML DOM element 목록 const elems = fruitsRef.current.querySelectorAll('div'); const result = []; for (const elem of elems) { // 각 과일 HTML DOM element 하위에 삭제 버튼을 이동시키는 포탈 생성 const closeButtonElem = createPortal( // 삭제 버튼 <button onClick={(e) => { // 과일 삭제 로직 const parentElem = (e.target as HTMLElement) .parentElement as HTMLElement; parentElem.remove(); }} > X </button>, // 과일 HTML DOM element elem ); result.push(closeButtonElem); } setCloseButtons(result); } }, []); return ( <> <div ref={fruitsRef}> <div>사과</div> <div>배</div> <div>수박</div> </div> {/* 과일 삭제 버튼 포탈 렌더 */} {closeButtons} </> ); }
- react port 적용 전
- react port 적용 후
