modal에 intercept routes를 사용하는 이유?
안녕하세요 제로초님 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
이거 조금 이상한데요. simple-modal1에서는 /auth/login 접근 시 {children} 부분이 없어 에러가 발생해야 됩니다.
0
안녕하세요, 인프런 AI 인턴입니다.
foo님께서 질문하신 “modal에 intercept routes를 사용하는 이유”에 대한 설명을 드리겠습니다.
Next.js에서 Intercepting Routes를 사용하는 이유:
세련된 사용자 경험: Intercepting routes를 사용하면 모달을 열었을 때 뒤의 기존 페이지가 그대로 유지되고 모달만 위에 뜨게 됩니다. 이렇게 하면 사용자가 페이지를 탐색하면서도 현재의 콘텐츠를 방해받지 않고 모달을 경험할 수 있는 장점을 제공합니다.
URL 기반 상태 관리: 모달이 열린 상태에서도 URL이 업데이트되기 때문에 사용자가 뒤로 가기 버튼을 눌렀을 때 자연스럽게 모달이 닫히고 이전 페이지로 돌아갈 수 있게 됩니다. 이는 브라우저의 기본 동작과 일관성을 유지할 수 있어 사용자 경험을 증진시킵니다.
SEO 개선: 각 모달이 자신의 URL을 가짐으로써, 사용자들이 이 URL을 통해 특정 상태로 접근할 수 있게 되어 SEO 측면에서 유리합니다. 이는 특히 공유 가능한 콘텐츠가 포함된 애플리케이션에 유리합니다.
관련하여 참조할 만한 링크는 다음과 같습니다:
- 인터셉팅 라우트를 사용할 때의 이점: 이 게시물에서는 왜 인터셉팅 라우트를 사용했는지에 대한 이유와, 어떤 상황에서 유용할 수 있는지를 설명해주고 있습니다.
제가 제공한 설명이 foo님의 프로젝트에 맞게 Intercepting Routes의 활용 이유를 이해하는 데 도움이 되길 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
캡처링부분 질문있습니다.
0
88
2
깃에 소스코드를 찾을 수 없습니다.
0
121
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
100
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
119
2
css 라이브러리 추천 부탁드립니다
0
153
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
137
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
121
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
177
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
192
3
폴링이 필요없는 이유
0
100
2
next Request Memoization과 react cache
0
114
2
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
0
90
2
next.js 서버fetch 에러 fallback ui 구현 방법
0
174
2
프레임워크 여론 파악법
0
128
2
필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??
0
109
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
110
2
template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈
0
70
2
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
0
135
2
next.js 에서 로그인에 관하여
0
144
1
Next의 route handler에 대한 질문이 있습니다.
0
102
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
103
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
88
2
vanilla-extract 못찾는 문제
0
235
2
fetch 캐싱과 revalidate 관련
0
93
2