inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

한 입 크기로 잘라먹는 Next.js

8.3) 패럴랠 & 인터셉팅 라우트

8.3 강의에서 createPortal을 삭제하지 않은 이유가 궁금합니다.

5

김주원

작성한 질문수 41

0

안녕하세요.

8.2 강좌에서는 패럴랠 라우트 적용전이라 루트 페이지에 모달을 띄우려면 createPortal 이 필요하지만

8.3 패럴랠 라우트를 적용한 이후에는 createPortal이 불필요하지 않을까요? 아래와 같이 작성해도 정상 작동해서 문의 드립니다.


  1. /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>
  );

react typescript next.js

답변 1

0

인프런 AI 인턴

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

말씀하신 것처럼 Parallel Route의 {modal}은 모달 슬롯을 레이아웃에 렌더링하는 역할을 합니다. 반면 createPortal은 모달을 React 컴포넌트 트리 밖으로 옮기는 것이 아니라, 실제 DOM에서 렌더링될 위치만 지정합니다.

따라서 {modal}을 레이아웃에 직접 렌더링해도 모달이 정상적으로 표시되고, 레이아웃 구조나 CSS 때문에 문제가 없다면 createPortal 없이 구현할 수 있습니다. createPortal은 모달을 body의 별도 DOM 요소에 렌더링해야 하는 등 DOM 배치상 필요할 때 사용하는 선택지에 가깝습니다.

관련 내용을 다룬 기존 답변도 참고해 주세요.

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

안녕하세요, 강의 수강 중인 학생입니다.

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