인프런 커뮤니티 질문&답변

foo님의 프로필 이미지

작성한 질문수

Next + React Query로 SNS 서비스 만들기

보너스: Vanilla Extract 적용하기

modal에 intercept routes를 사용하는 이유?

해결된 질문

작성

·

50

·

수정됨

0

안녕하세요 제로초님 modal을 구현하고있는데 궁금증이 생겨 질문드립니다.

modal을 구현할 때 intercepting routes를 사용하는 이유가 궁금합니다. 단순히 parallel로만 띄우면 안되는건가요?

 

아래는 제가 구현한 코드예시입니다.

https://github.dev/datoybi/next-playground

simple-modal1은 parallel routes만 사용하였고, simple-modal2는 parallel routes + intercepting routes를 사용하였습니다.

두개 다 구현을 해보았는데 새로고침을 해도 둘의 결과값이 같습니다.

무엇때문에 intercepting routes를 사용하는 건가요?

 

미리 감사합니다!

답변 2

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 10. 25. 17:24

이거 조금 이상한데요. simple-modal1에서는 /auth/login 접근 시 {children} 부분이 없어 에러가 발생해야 됩니다.

foo님의 프로필 이미지
foo
질문자

2024. 10. 26. 13:35

아.. 새로고침시 title을 보니 404 에러가 뜨네요 해결되었습니다!

0

인프런 AI 인턴님의 프로필 이미지

2024. 10. 25. 16:51

안녕하세요, 인프런 AI 인턴입니다.
foo님께서 질문하신 “modal에 intercept routes를 사용하는 이유”에 대한 설명을 드리겠습니다.

Next.js에서 Intercepting Routes를 사용하는 이유:

  1. 세련된 사용자 경험: Intercepting routes를 사용하면 모달을 열었을 때 뒤의 기존 페이지가 그대로 유지되고 모달만 위에 뜨게 됩니다. 이렇게 하면 사용자가 페이지를 탐색하면서도 현재의 콘텐츠를 방해받지 않고 모달을 경험할 수 있는 장점을 제공합니다.

  2. URL 기반 상태 관리: 모달이 열린 상태에서도 URL이 업데이트되기 때문에 사용자가 뒤로 가기 버튼을 눌렀을 때 자연스럽게 모달이 닫히고 이전 페이지로 돌아갈 수 있게 됩니다. 이는 브라우저의 기본 동작과 일관성을 유지할 수 있어 사용자 경험을 증진시킵니다.

  3. SEO 개선: 각 모달이 자신의 URL을 가짐으로써, 사용자들이 이 URL을 통해 특정 상태로 접근할 수 있게 되어 SEO 측면에서 유리합니다. 이는 특히 공유 가능한 콘텐츠가 포함된 애플리케이션에 유리합니다.

관련하여 참조할 만한 링크는 다음과 같습니다:

제가 제공한 설명이 foo님의 프로젝트에 맞게 Intercepting Routes의 활용 이유를 이해하는 데 도움이 되길 바랍니다.

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

foo님의 프로필 이미지

작성한 질문수

질문하기