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를 통하여 위치를 가져왔다.

 

여러번 모달을 구현하면서 이 기능을 잊고 구현하지 않았는데 사용했을 때에 확실히 디버깅이나 개발자 도구를 통해 확인할 때 유용할 것 같다는 생각이 든다.