FrontEngineer JungBam
React Portal 본문
모달, 사이드 드로우, 다이어로그와 같은 오버레이 관련 컴포넌트를 만들어 사용할 때 유용함.
오버레이되는 컴포넌트의 최종 HTML 위치가 root가 아닌 의도하지 않은 매우 깊숙한 곳에 위치하지 않도록 해당 오버레이가 생성되었을 때에 직관적으로 볼 수 있도록 도와주는 장치.
준비과정
1. 해당 컴포넌트 파일에 리액트 돔 임포트
import ReactDOM from 'react-dom'
2. 포털 될 실제 렌더링 되는 DOM이 되는 html파일에 포탈을 탈 위치 그려주기.
<div id="backdrop-root"></div>
3. 포털로 이동시킬 컴포넌트 분리하기
const Backdrop = (props) => {
return <div className={classes.backdrop} />
}
※ 같은 파일 내에 컴포넌트를 추가생성했다.
4. 리액트 포털 메소드를 사용하여 보내주기.
{ReactDOM.createPortal(
<Backdrop onConfirm={props.onConfirm} />,
document.getElementById('backdrop-root'),
)}
※ 첫번쨰 인자는 내가 보낼 컴포넌트이고 두번째 인자는 포털이동 될 위치이다.
★ 해당 위치는 html안에 지정했기 때문에 document를 통하여 위치를 가져왔다.
여러번 모달을 구현하면서 이 기능을 잊고 구현하지 않았는데 사용했을 때에 확실히 디버깅이나 개발자 도구를 통해 확인할 때 유용할 것 같다는 생각이 든다.
반응형
'리액트' 카테고리의 다른 글
LocalStorage와 useEffect (0) | 2022.11.23 |
---|---|
useRef (feat. useState) (0) | 2022.11.23 |
Why 리액트 훅? (0) | 2022.11.22 |
useEffect와 마운트 (1) | 2022.11.22 |
React <div> Soup (0) | 2022.11.21 |
Comments