<React> React Portal (부제 : Modal, Sidebar의 DOM 위치는 어디에 있어야 할까?) / useRef

휜·2023년 5월 21일

React TIL

React

목록 보기

11/29

JSX에서 빈 태그와 React.Fragment 차이

React Portal

더 학습해보기
reactPortal 공식문서_최신버전

모달은 전체 페이지에 대한 오버레이다. 따라서 당연히 모든 것의 위에 있어야 하는데, 모달과 같은 동일선상에 컨텐츠 요소들이 들어가면 바람직하지 않은 HTML 구조이다.

이는 스타일링이나 접근성의 관점에서 문제가 생길 수 있다.

리액트 포탈을 사용하면 root안에 들어가는 모달이 아닌, 동일 선상의 위치한 모달을 웹에 구현할 수 있게 된다.

아래 코드를 보며 이해를 했다.

// React JSX
return (
  <>
  	<MyModal/>
  	<MyInputForm/>
  </>
)
-------------------------------------------------
// Real DOM
<section>
  <h2>Sub Title Text Text..</h2>
  <div class="Modal">
    <h2>Modal !!</h2>
  </div>
  <form class="input_form">
    <label>User name</label>
    <input type="text">
  </form>
</section>

=> class 이름으로 분간할 수 있음. React JSX 환경에서 컴포넌트를 만들고 Real DOM으로 변환하면 modal과 form이 동일하게 있는 것을 볼 수 있음.
웹에서 작동은 하겠지만, 잘못된 HTML 구조이다.

마치 button을 만드는데, <button>을 쓰지 않고, <div>로 버튼을 만든 느낌이랄까..

<div onClick={onAddUser} class="im_button">Add</div>

HTML 구조를 정상적이라면 이런 코드 구조가 나와야 할 것이다.

//Real DOM
<div class="Modal">
    <h2>Modal !!</h2>
</div> // 모달이 레이아웃 제일 위에 올라옴
<section>
  <h2>Sub Title Text Text..</h2>
  <form class="input_form">
    <label>User name</label>
    <input type="text">
  </form>
</section>

React에서 이런 구조를 만들고 싶다면, React Portal을 사용하면 된다.

React Portal 사용법

index.html 파일에 id=root와 형제인 div를 하나 만들어준다.
{ReactDOM.createPortal(보여줄 컴포넌트, 컴포넌트를 위치시키고자 하는 index.html 파일의 div id)}

{ReactDOM.createPortal(
        <ModalOverlay
          title={props.title}
          message={props.message}
          onConfirm={props.onConfirm}
        />, // 내가 보여주고픈 컴포넌트
        document.getElementById("overlay-root") // <div> id="overlay-root" </div>에 내가 보여주고픈 컴포넌트를 띄워주세요.
      )}