패레럴 라우트와 인터셉터 라우트를 공부하다 생긴 의문점입니다.
390
작성한 질문수 1
안녕하세요 제로초님 강의를 듣다 의문점이 하나 생겨 질문드립니다.
패레럴 라우트와 인터셉터 라우트를 사용해서 모달을 띄우는 방법을 알려주셨는데 기존의 react에서 사용하던 방식으로 모달의 띄우는게 더 코드도 단순하고 간단하게 구현할 수 있을것 같은데 nextjs에서는 페레럴 라우트와 인터셉터 라우트를 사용해서 모달을 구현하는게 어떤 이점이 있는지 궁금합니다.
기존의 모달을 띄우는 방법은 여러가지가 있지만 state를 통해서 구현하거나 queryString을 사용해서 구현할 수 있을것 같습니다.
queryString을 사용하면 뒤로가기 버튼클릭시 모달을 띄우기전 url로도 이동할 수 있고 새로고침을 해도 모달과 뒤의 배경을 같이 보여줄 수 있을 것 같습니다.
혼자서 생각도 해보고 인터넷에서 자료도 찾아봤지만 정확한 이유를 잘 모르겠어서 질문드립니다. 오늘도 좋은 하루 되셨으면 좋겠습니다. 감사합니다.
답변 2
0
ai 인턴 답변대로, url 기반 상태 관리 및 검색엔진최적화(SEO), UX 측면이 큽니다.
UX 측면을 부연 설명하자면 사용자가 페이지를 공유할 때 가끔 공유 서비스가 쿼리스트링을 잘라버리는 경우도 있고, 사용자가 주소만 보고도 어떤 페이지인지 이해하기 더 쉽기도 하고요.
또한 인터셉팅될 때는 모달이지만 새로고침 후에는 전체화면이 되게끔 할 수 있다는 점도 있습니다.
0
답변 감사합니다. 제가 모달로 만들 페이지는 사용자와 공유가 딱히 필요하진 않을 것 같아서 UX측면의 이점은 많이 없어질것 같습니다. 또한 SEO측면에서도 로그인을 해야 사용가능한 사이트이기 때문에 모달까지 SEO를 고려를 하진 않아도 될것 같다고 생각이 들고 제로초님이 사실 SEO에는 metadata가 더 중요하다고 답변달아 주셨던게 생각이 나서 그런데 그럼에도 불구하고 next14이후에서는 모달을 만들때 패레럴 라우트와 인터셉터 라우트를 사용하는게 더 좋은 방법일까요??
아니면 저같은 경우에는 굳이 사용하지 않아도 되는 기술일까요??
답변을 적다보니 따지거나 답정너같은 답변을 달게 되었는데 그런 의도는 아니고 정말 궁금해서 질문드립니다. 오늘 하루도 좋은 하루 되셨으면 좋겠습니다.
0
안녕하세요, 인프런 AI 인턴입니다.
tsg님의 질문에 답변 드립니다. Next.js에서 모달을 구현하기 위해 패러럴 라우트와 인터셉터 라우트를 사용하는 것과 관련된 의문점이 있으신 것으로 보입니다. 주요 질문은 Next.js에서 해당 방식으로 모달을 구현할 때의 이점이 무엇인지입니다.
Firstly, 패러럴 라우트와 인터셉터 라우트를 사용하는 주된 이유는 더 세련된 사용자 경험을 제공하기 위함입니다. 이 방식을 통해 다음과 같은 이점을 얻을 수 있습니다:
URL 기반의 상태 관리: 사용자가 뒤로 가기 버튼을 눌렀을 때 자연스럽게 이전 상태로 돌아갈 수 있게 해주며, 새로고침 했을 때에도 현재 상태(모달의 열림 상태 등)를 유지할 수 있게 합니다. 이는 보다 직관적인 사용자 경험을 제공합니다.
SEO와 공유성 향상: 패러럴 라우트와 인터셉터 라우트를 사용하면 각 모달에 대해 고유의 URL을 가질 수 있습니다. 이로 인해 사용자가 모달 상태의 페이지를 다른 사람과 공유하거나 즐겨찾기에 추가하기가 용이해지며, 검색 엔진 최적화(SEO) 측면에서도 유리합니다.
경량화된 페이지 전환: 패러럴 라우트와 인터셉터 라우트를 사용하면 페이지 전체를 리로드하지 않고 모달을 통해 필요한 부분만을 동적으로 로드할 수 있습니다. 이는 앱의 성능을 향상시키며 더 빠른 사용자 인터페이스 반응을 가능하게 합니다.
특히, Next.js 개발에서는 이러한 방식이 매우 유용하게 사용됩니다. 예를 들어, “모달에 인터셉트 라우트를 사용하는 이유가 새로고침했을 때를 위함인가요?“와 관련된 답변은 라우팅 관련해서 질문이 있습니다!에서 제공되며, 뒷 배경은 이전 라우터 그대로 유지하면서 모달만 위에 띄우기 위함이라는 접근 방법을 설명하고 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
캡처링부분 질문있습니다.
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