react portals

리액트에서 포탈이라는 개념을 배웠다. 포탈은 모달창 만들었을 때 원래 App안에 있던 것을
바깥으로 빼주는 역할을 한다.

portal을 쓰는 이유는 리액트에서 자식 컴포넌트가 메인 컴포넌트를 침범하여 레이아웃이 깨지는 문제가 있기 때문이다. 이러한 이유로 모달창을 만들때는 portal를 쓴다고 한다.

Many times when we are rendering any child components on any main components then it happens that child component gets overflow on the main component, due to which the layout of the application gets disturbed, so to deal with such type of situations we can use the concept of the portal

아래는 예시코드이다.

import React from "react";
import "./Modal.css";
import ReactDOM from "react-dom";

export default function Modal({ children, handleClose }) {
  return ReactDOM.createPortal(
    <div className="modal-backdrop">
      <div className="modal">
        {children}
        <button onClick={handleClose}>close</button>
      </div>
    </div>,
    document.body
  );
}

ReactDOM.createPortal() 메서드를 사용해 감싸주고 두 번째 인자로 document.body를 전달하면, 모달창 코드가 HTML body 맨 아래에 위치하게 된다. 이를 통해 메인 컴포넌트와 독립적으로 렌더링되는 것을 볼 수 있다. 참고로 React 18 이상에서는 import ReactDOM 없이 사용할 수 있다.