React에서 모달과 툴팁을 생성하는 것은 스타일이 복잡하고 스타일링 오류가 많이 발생하는 경우가 많습니다.
createPortal API는 이 프로세스를 단순화하여 기본 DOM 외부에 구성 요소를 렌더링할 수 있도록 하여 스타일 지정과 유지 관리가 용이해집니다. 이 게시물에서 우리는 이 도구를 사용하여 React에서 올바른 방법으로 모달과 툴팁을 만드는 방법을 배울 것입니다.

createPortal API 이해

createPortal은 DOM의 다양한 부분에서 구성 요소를 렌더링할 수 있는 React 내장 기능입니다. 또한 모달 및 오버레이, 타사 구성 요소 및 사용자 정의 UI 요소를 구축하는 데 특히 유용합니다.

작동 원리

포털은 구성 요소의 return 문 내에서 사용되며 DOM 노드의 물리적 배치만 변경합니다. 이는 기본 DOM 트리 외부로 DOM 노드를 순간 이동하는 것과 같습니다. createPortal API는 두 개의 매개변수와 세 번째 선택적 매개변수에 액세스합니다:

• Children: React, div, 구성 요소 또는 React 조각으로 렌더링할 수 있는 모든 것
• domNode: 배치할 자식의 위치입니다.
• 키 (선택 사항): 포털 키로 사용할 고유 번호 또는 문자열입니다.

컴포넌트 A에서 포털을 생성하고 이를 컴포넌트 B에서 렌더링한다고 가정하면 포털의 하위 항목은 컴포넌트 A의 모든 상태와 변수에 액세스하고 컴포넌트에서 렌더링되는 동안 컴포넌트 A에 있는 것처럼 작동합니다. 나.

포털 생성 및 사용

아래 예에서 포털은 상태를 받아들이는 하위 구성 요소를 순간 이동하고 이 구성 요소를 본문으로 이동하는 데 사용됩니다.

import { createPortal } from 'react-dom'

const App = () => {
  const [state, setState] = useState()

  return(
    

      
 ... 
      createPoratl(
        ,
        document.body
      )
    
  )
}

export default App

이제 하위 구성 요소가 HTML의 본문 태그로 렌더링됩니다.

결론

createPortal은 기본 DOM 트리 외부에서 렌더링해야 하는 모달, 툴팁 및 기타 구성 요소를 생성하기 위한 React의 유용한 도구입니다. 이 도구를 사용하면 이러한 요소에 대해 더 깨끗하고 유연하며 효율적인 접근 방식을 얻을 수 있습니다.