인프런 커뮤니티 질문&답변
작성한 질문수
인터셉팅 라우트 설명
작성
·
45
0
강의 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의 일관성을 유지하면서도 다양한 콘텐츠를 별도로 관리할 수 있는 유용한 방식입니다.
더 궁금한 점이 있으시면, 아래 링크들을 참조하여 강사님의 답변을 확인하시면 관련 내용을 좀 더 이해하시는데 도움이 될 것입니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.