8.3 강의에서 createPortal을 삭제하지 않은 이유가 궁금합니다.
5
작성한 질문수 41
안녕하세요.
8.2 강좌에서는 패럴랠 라우트 적용전이라 루트 페이지에 모달을 띄우려면 createPortal 이 필요하지만
8.3 패럴랠 라우트를 적용한 이후에는 createPortal이 불필요하지 않을까요? 아래와 같이 작성해도 정상 작동해서 문의 드립니다.
/layout.tsx createPortal 타겟 id 삭제
<html lang="en">
<body>
<div className={style.container}>
<header>
<Link href={"/"}>📚 ONEBITE BOOKS</Link>
</header>
<main>{children}</main>
<Footer />
</div>
{modal}
</body>
</html>createPortal 삭제
return (<dialog
onClose={() => router.back()}
onClick={(e) => {
if ((e.target as any).nodeName === "DIALOG") {
router.back();
}
}}
className={style.modal}
ref={dialogRef}
>
{children}
</dialog>
);
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. 김주원님, 질문해 주셔서 감사합니다!
말씀하신 것처럼 Parallel Route의 {modal}은 모달 슬롯을 레이아웃에 렌더링하는 역할을 합니다. 반면 createPortal은 모달을 React 컴포넌트 트리 밖으로 옮기는 것이 아니라, 실제 DOM에서 렌더링될 위치만 지정합니다.
따라서 {modal}을 레이아웃에 직접 렌더링해도 모달이 정상적으로 표시되고, 레이아웃 구조나 CSS 때문에 문제가 없다면 createPortal 없이 구현할 수 있습니다. createPortal은 모달을 body의 별도 DOM 요소에 렌더링해야 하는 등 DOM 배치상 필요할 때 사용하는 선택지에 가깝습니다.
관련 내용을 다룬 기존 답변도 참고해 주세요.
- 섹션 8 모달 관련 질문 — Parallel Route의
{modal}과createPortal이 각각 어떤 역할을 하는지 설명합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
안녕하세요, 강의 수강 중인 학생입니다.
0
69
2
강의 잘 들었습니다.
0
66
1
generateStaticParams() 응용 질문 드립니다.
0
91
2
강의 업데이트 관련
0
101
1
에러핸들링- rootlayout에 관하여
0
84
2
버셀로 서버 배포 후 접속 시 500 에러 발생
0
166
2
컴포넌트와 레이아웃
0
96
2
@/styles/globals.css'
0
140
2
풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문
0
112
2
next.js 프로젝트
0
108
1
Next.js + Tanstack Query BFF 구조 질문
1
141
2
Next.js 사전렌더링 이해하기 부분
0
130
2
모달 관련 질문
0
151
3
렌더링 관련 질문
0
145
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
139
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
130
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
153
2
npx prisma db push 시 에러가 뜹니다.
0
192
3
vercel 배포를 실패하였습니다.
0
214
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
141
2
getServerSideProps 함수와 SSR의 관계
0
191
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
133
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
192
2
일반적인 nextjs project architecture에 대하여..
0
160
2





