M

MLOG

한국어

React Portals의 사용 사례, 구현 방법, 이점 및 표준 컴포넌트 계층 외부에서 콘텐츠를 렌더링하기 위한 모범 사례를 다루는 종합 가이드.

React Portals: 컴포넌트 트리 외부에 콘텐츠 렌더링하기

React 포털은 자식 컴포넌트를 부모 컴포넌트의 DOM 계층 외부에 존재하는 DOM 노드로 렌더링하는 강력한 메커니즘을 제공합니다. 이 기술은 모달, 툴팁, 그리고 페이지 요소의 위치 및 스태킹 순서를 정밀하게 제어해야 하는 다양한 시나리오에서 매우 유용합니다.

React 포털이란 무엇인가요?

일반적인 React 애플리케이션에서 컴포넌트는 엄격한 계층 구조 내에서 렌더링됩니다. 부모 컴포넌트는 자식 컴포넌트를 포함하며, 이렇듯 계속됩니다. 그러나 때로는 이 구조에서 벗어나야 할 때가 있습니다. 바로 이 지점에서 React 포털이 등장합니다. 포털을 사용하면 컴포넌트의 콘텐츠를 DOM의 다른 부분으로 렌더링할 수 있으며, 이 부분이 React 트리 내 컴포넌트의 직접적인 자손이 아니더라도 가능합니다.

컴포넌트 트리 내 어디에 렌더링되든 애플리케이션의 최상위 레벨에 표시되어야 하는 모달 컴포넌트가 있다고 상상해 보세요. 포털이 없다면, 절대 위치 지정과 z-index를 사용하여 이를 달성하려고 시도할 수 있는데, 이는 복잡한 스타일링 문제와 잠재적인 충돌을 야기할 수 있습니다. 포털을 사용하면 모달의 콘텐츠를 "modal-root"와 같은 전용 DOM 노드에 직접 렌더링하여 항상 올바른 레벨에 렌더링되도록 할 수 있습니다.

React 포털을 사용하는 이유는 무엇인가요?

React 포털은 웹 개발의 여러 일반적인 문제를 해결합니다:

React 포털 구현 방법

React 포털을 사용하는 것은 간단합니다. 다음은 단계별 가이드입니다:

  1. DOM 노드 생성: 먼저, 포털 콘텐츠를 렌더링할 DOM 노드를 생성합니다. 이 작업은 일반적으로 `index.html` 파일에서 수행됩니다. 예시: 
    <div id=\"modal-root\"></div>
  2. `ReactDOM.createPortal()` 사용: React 컴포넌트에서 `ReactDOM.createPortal()` 메서드를 사용하여 생성된 DOM 노드에 콘텐츠를 렌더링합니다. 이 메서드는 두 가지 인수를 취합니다: React 노드(렌더링하려는 콘텐츠)와 렌더링할 DOM 노드. 
    import ReactDOM from 'react-dom';

function MyComponent() {
  return ReactDOM.createPortal(
    <div>This content is rendered in the modal-root!</div>,
    document.getElementById('modal-root')
  );
}

export default MyComponent;
  3. 컴포넌트 렌더링: 포털을 포함하는 컴포넌트를 다른 React 컴포넌트와 동일하게 렌더링합니다. 
    function App() {
  return (
    <div>
      <h1>My App</h1>
      <MyComponent />
    </div>
  );
}

export default App;

이 예시에서, `MyComponent`는 `App` 컴포넌트 내부에 렌더링되지만, `MyComponent` 내부의 콘텐츠는 `modal-root` 요소 내부에 렌더링됩니다.

예시: React 포털로 모달 컴포넌트 생성하기

React 포털을 사용하여 완전한 모달 컴포넌트를 만들어 봅시다. 이 예시에는 모달을 열고 닫는 기본적인 스타일링 및 기능이 포함되어 있습니다.

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

function Modal({ children, onClose }) {
  const [isOpen, setIsOpen] = useState(true);

  const handleClose = () => {
    setIsOpen(false);
    onClose();
  };

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className=\"modal-overlay\">\\n      <div className=\"modal\">\\n        <div className=\"modal-content\">\\n          {children}\\n        </div>\\n        <button onClick={handleClose}>Close</button>\\n      </div>\\n    </div>,
    modalRoot
  );
}

function App() {
  const [showModal, setShowModal] = useState(false);

  const handleOpenModal = () => {
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
  };

  return (
    <div>
      <h1>My App</h1>
      <button onClick={handleOpenModal}>Open Modal</button>
      {showModal && (
        <Modal onClose={handleCloseModal}>
          <h2>Modal Content</h2>
          <p>This is the content of the modal.</p>
        </Modal>
      )}
    </div>
  );
}

export default App;

이 예시에서:

모달을 화면에 올바르게 배치하려면 `modal-overlay` 및 `modal` 클래스에 CSS 스타일링을 추가해야 합니다. 예시:

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

.modal-content {
  margin-bottom: 10px;
}

포털로 이벤트 처리하기

포털을 사용할 때 한 가지 중요한 고려 사항은 이벤트가 처리되는 방식입니다. 이벤트 버블링은 표준 React 컴포넌트와 포털에서 다르게 작동합니다.

포털 내에서 이벤트가 발생하면, 평소처럼 DOM 트리를 통해 버블링됩니다. 그러나 React 이벤트 시스템은 포털을 일반 React 노드로 취급하므로, 이벤트는 포털을 포함하는 React 컴포넌트 트리도 통해 버블링됩니다.

이는 주의하지 않으면 예상치 못한 동작으로 이어질 수 있습니다. 예를 들어, 부모 컴포넌트에 해당 컴포넌트 내의 이벤트에 의해서만 트리거되어야 하는 이벤트 핸들러가 있는 경우, 포털 내의 이벤트에 의해서도 트리거될 수 있습니다.

이러한 문제를 피하려면, 이벤트 객체에서 `stopPropagation()` 메서드를 사용하여 이벤트가 더 이상 버블링되지 않도록 할 수 있습니다. 또는 React의 합성 이벤트와 조건부 렌더링을 사용하여 이벤트 핸들러가 트리거되는 시점을 제어할 수 있습니다.

다음은 이벤트가 부모 컴포넌트로 버블링되지 않도록 `stopPropagation()`을 사용하는 예시입니다:

function MyComponent() {
  const handleClick = (event) => {
    event.stopPropagation();
    console.log('Clicked inside the portal!');
  };

  return ReactDOM.createPortal(
    <div onClick={handleClick}>This content is rendered in the portal.</div>,
    document.getElementById('portal-root')
  );
}

이 예시에서, 포털 내의 콘텐츠를 클릭하면 `handleClick` 함수가 트리거되지만, 이벤트는 어떤 부모 컴포넌트로도 버블링되지 않을 것입니다.

React 포털 사용을 위한 모범 사례

React 포털 작업을 할 때 명심해야 할 몇 가지 모범 사례는 다음과 같습니다:

React 포털의 대안

React 포털은 강력한 도구이지만, 유사한 결과를 달성하기 위해 사용할 수 있는 다른 접근 방식도 있습니다. 몇 가지 일반적인 대안은 다음과 같습니다:

사용할 접근 방식을 선택하는 것은 애플리케이션의 특정 요구 사항과 생성하려는 UI 요소의 복잡성에 따라 달라집니다. 포털은 요소의 위치 지정 및 스태킹 순서를 정밀하게 제어하고 CSS 충돌을 피하고자 할 때 일반적으로 최선의 선택입니다.

글로벌 고려 사항

글로벌 사용자를 위한 애플리케이션을 개발할 때는 현지화, 접근성, 문화적 차이와 같은 요소를 고려하는 것이 중요합니다. React 포털은 이러한 고려 사항을 해결하는 데 기여할 수 있습니다:

이러한 글로벌 고려 사항을 고려함으로써, 다양한 사용자를 위해 더 포괄적이고 사용자 친화적인 애플리케이션을 만들 수 있습니다.

결론

React 포털은 표준 컴포넌트 트리 외부에 콘텐츠를 렌더링하기 위한 강력하고 다재다능한 도구입니다. 모달, 툴팁, 팝오버와 같은 일반적인 UI 패턴에 대해 깔끔하고 우아한 솔루션을 제공합니다. 포털이 어떻게 작동하는지 이해하고 모범 사례를 따르면, 더 유연하고 유지보수하기 쉬우며 접근성 높은 React 애플리케이션을 만들 수 있습니다.

자신만의 프로젝트에서 포털을 실험하고 UI 개발 워크플로우를 단순화할 수 있는 다양한 방법을 발견해 보세요. 프로덕션 애플리케이션에서 포털을 사용할 때는 이벤트 처리, 접근성 및 글로벌 고려 사항을 반드시 고려하십시오.

React 포털을 마스터함으로써, React 기술을 한 단계 발전시키고 글로벌 사용자를 위한 더욱 정교하고 사용자 친화적인 웹 애플리케이션을 구축할 수 있습니다.