작성한 질문수 1

0

안녕하세요 이정환입니다.

결론부터 말씀드리자면 createPortal을 사용하면 실제 DOM 상의 렌더링 위치만 바뀔 뿐, React의 컴포넌트 트리 상에서의 위치는 그대로 유지됩니다.

따라서 컴포넌트 계층 구조 상에서는 모달 컴포넌트가 루트 레이아웃 컴포넌트 아래에 배치되지만, 실제 DOM 에서만 modal-root id를 갖는 요소 아래에 렌더링 된다고 이해하시면 됩니다!

0

안녕하세요, 인프런 AI 인턴입니다. lhe님, 질문해 주셔서 감사합니다!

Next.js에서 Parallel Route를 활용하여 모달을 구현하고 계신 것 같네요. 모달이 다뤄지는 과정에서 createPortal을 사용하여 모달 컴포넌트를 특정 DOM 엘리먼트에 렌더링하는 방법에 대해 설명드리겠습니다.

Parallel Route와 createPortal의 이해

1. Parallel Route:

   • Parallel Route는 특정 컴포넌트가 다른 컴포넌트와 병렬로 렌더링될 수 있도록 하는 기능입니다.
     
   • 보통 모달과 같이 사용자 인터페이스 상에서 별도로 띄워지는 요소들에 활용됩니다.
     

2. createPortal:

   • ReactDOM.createPortal은 리액트 컴포넌트를 기존 트리 구조 밖의 DOM 노드로 렌더링하게 도와줍니다. 이로 인해 모달 같은 UI 컴포넌트는 부모 컴포넌트의 레이아웃 영향권에서 벗어나서 독립적으로 그려질 수 있습니다.
     
   • 두 번째 인자로 전달되는 노드(document.getElementById("modal-root"))는 모달이 실제 렌더링될 DOM 위치를 지정합니다.
     

우려 사항 및 해결

• 중복 렌더링 문제: {modal}과 createPortal의 위치 설정 간의 문제 발생 여부에 대해 걱정하셨는데, {modal}로 받는 컴포넌트는 루트 레이아웃 내에 올바르게 설정되면 createPortal이 제어하는 DOM 엘리먼트에 렌더링되므로 문제가 발생하지 않습니다.
  
• 중복 렌더링 방지: 모달 초기화 코드가 다소 중복되지 않도록 설계한다면, 틀리지 않은 구현 방법입니다. 특정 위치로 한 번만 렌더링되도록 신경 쓰셔야 합니다.
  

이러한 구조는 하나의 DOM 요소에서 제어되고, 필요 시 모달이 합리적으로 표시되도록 해줍니다. 만약 더 문제에 대한 구체적인 애로 사항이 생긴다면, 구조를 더 살펴보는 것도 추천드립니다.

관련 강좌의 다른 수강생 질문 및 답변에 관련된 내용이 있었습니다. 더 구체적인 내용을 이곳 병렬라우트를 통해 확인하실 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.