인터셉팅 라우트 설명
93
작성한 질문수 2
강의 50초 정도에,
i, login, page.tsx는 {children}에서 렌더링, 여기는 (@modal 의 하위 폴더와 파일 선택) {modal}에서 되죠?
라고 설명하시는 부분이 이해가 안됩니다.
저는,
app/(beforeLogin)/layout.tsx 의 {children}은 app/(beforeLogin)/page.tsx 를 가져오는 것이고,
{modal}은 @modal 폴더의 page.tsx (default.tsx, i/flow/login/폴더로 리다이렉션) 를 찾는 것으로 이했습니다.
여러 폴더를 모두 보여준다고 설명하신듯하여, 이해가 안되네요.
답변 2
0
항상 주소를 기준으로 생각하시는 게 좋습니다.
/에 접속하는 경우
children은 page.tsx가 렌더링되고, modal은 매칭되는 주소가 없어 @modal/default.tsx가 렌더링됩니다.
/login에 접속하는 경우
children은 login/page.tsx가 렌더링되고, modal은 매칭되는 주소가 없어 @modal/default.tsx가 렌더링됩니다.
/i/flow/login에 접속하는 경우
children은 i/flow/login/page.tsx가 렌더링되고, modal은 @modal/i/flow/login/page.tsx가 렌더링됩니다.
0
안녕하세요, 인프런 AI 인턴입니다.
강진모님께서 질문하신 인터셉팅 라우트와 관련된 부분에 대해서 설명드리겠습니다.
Next.js의 인터셉팅 라우트와 패러랠 라우트를 활용하여, 하나의 레이아웃에서 서로 다른 페이지를 처리할 수 있습니다. 일반적으로 {children}은 기본적으로 해당 레이아웃의 하위 경로에 있는 페이지를 렌더링합니다. 즉, app/(beforeLogin)/layout.tsx의 {children}은 app/(beforeLogin)/page.tsx를 의미합니다.
하지만 @modal과 같은 폴더를 사용하면, 별도의 페러랠 라우트를 만들 수 있습니다. {modal}은 이러한 페러랠 라우트에서 제공하는 페이지를 의미하며, 예를 들어 app/(beforeLogin)/@modal/page.tsx 또는 app/(beforeLogin)/@modal 하위의 특정 경로에 있는 파일들을 참조하게 됩니다. 이렇게 구현하게 되면, 메인 경로에서 벗어나지 않으면서도 모달 같은 인터페이스를 독립적으로 관리할 수 있게 됩니다.
질문에서 언급하신 대로 “i, login, page.tsx는 {children}에서 렌더링”된다는 설명은 {children} 부분이 기본적으로 하위 페이지를 (즉, 주 경로의 페이지를) 나타내고, {modal}은 관련된 모달 경로의 페이지를 나타낸다는 뜻입니다. 다양한 경로와 레이아웃의 조합 덕분에 여러 페이지를 효율적으로 구성할 수 있습니다.
추가적으로 설명 드리자면, 페러랠 라우트는 UI의 일관성을 유지하면서도 다양한 콘텐츠를 별도로 관리할 수 있는 유용한 방식입니다.
더 궁금한 점이 있으시면, 아래 링크들을 참조하여 강사님의 답변을 확인하시면 관련 내용을 좀 더 이해하시는데 도움이 될 것입니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
캡처링부분 질문있습니다.
0
76
2
깃에 소스코드를 찾을 수 없습니다.
0
113
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
98
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
111
2
css 라이브러리 추천 부탁드립니다
0
141
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
133
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
119
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
172
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
184
3
폴링이 필요없는 이유
0
93
2
next Request Memoization과 react cache
0
110
2
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
0
84
2
next.js 서버fetch 에러 fallback ui 구현 방법
0
173
2
프레임워크 여론 파악법
0
125
2
필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??
0
103
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
102
2
template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈
0
66
2
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
0
132
2
next.js 에서 로그인에 관하여
0
139
1
Next의 route handler에 대한 질문이 있습니다.
0
101
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
98
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
85
2
vanilla-extract 못찾는 문제
0
230
2
fetch 캐싱과 revalidate 관련
0
85
2