React Portal 소개

포털이라는 단어를 생각할 때 가장 먼저 떠오르는 것은 텔레포트입니다. 우리는 부모-자식 계층 외부로 텔레포트하고 형제 요소를 만들 수 있습니다. 오늘은 React Portal에 대해 이야기하겠습니다. 포털이 무엇인지 실제로 설명하기 전에 포털이 무엇을 해결하는지 알려드리겠습니다.

문제

모든 기본 반응 앱에는 HTML 파일에 div가 있고 javascript 파일에는 다음 코드가 있습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('root'));

ReactDOM은 App 구성 요소를 HTML, CSS 및 Javascript로 변환하고 선택한 요소에 삽입합니다.

기본적으로 대부분의 반응 앱에는 다음과 같은 계층 구조가 있습니다.



우리는 모두 구성 요소를 <App /> 구성 요소에 포함합니다. 모달 구성 요소를 만들려고 할 때 전체 페이지를 덮고 다른 어떤 것도 클릭할 수 없도록 해야 합니다. 일반 HTML 페이지에서는 다음과 같은 작업을 수행합니다.

<div class="content">
  <!-- button to open modal -->
  <button class="modal-activate">Open Modal</button>

  <!-- content of page goes here -->
</div>

<div class="modal hidden">
  <!-- Modal goes here -->
</div>

Javascript를 통해 다음과 같이 할 수 있습니다.

const modal = document.querySelector('.modal');
const modalActivateButton = document.querySelector('.modal-activate');

modal.classList.remove('.hidden');

CSS를 추가하여 display 클래스에서 none를 hidden로 설정할 수 있습니다. 아이디어를 얻습니다.

보시다시피, 형제div가 있어야 합니다. 하나는 모달용이고 다른 하나는 나머지 콘텐츠용입니다. 이제 React에서 동일한 작업을 수행하는 방법을 살펴보겠습니다.

포털

기본적으로 포털을 사용하면 루트div의 형제div에 구성 요소를 추가할 수 있습니다. 먼저 div 파일에 다른 index.html를 추가해야 합니다.

<div id="root"></div>
<div id="modal"></div>

Modal라는 새 구성 요소를 만들어 보겠습니다.

import React from 'react';
import ReactDOM from 'react-dom';

export default function Modal({ title, content, actions, onDismiss }) {
    return ReactDOM.createPortal(
        <div>
                  // Content for modal goes here
                </div>,
        document.querySelector('#modal')
    );
}

이제 div에 모든 버튼/콘텐츠를 추가할 수 있습니다.

그게 다야. 끝났어. 남매div가 생성되었습니다! 지금은 여기까지입니다. 이 간단한 게시물이 마음에 드셨으면 좋겠습니다. 마음에 드셨다면 좋아요와 팔로우 부탁드립니다. 안녕👋