Parallel Route를 사용한 모달에 대해 질문이 있어요.
하드 내비게이션(새로고침, 직접 URL 접근) 불가라고 하셨는데, default.js를 활용하면, 딥 링킹과 공유 가능 URL을 지원할 수 있는걸까요??
回答 2
1
정확하게 보셨어요 default.js를 잘 활용하면, 그와함께 경로 설계를 함께 바꾼다면 가능해요..!
default.js는 슬롯이 비어 있을 때 보여 줄 기본 화면만 담당해서요.
딥 링킹과 공유 가능한 URL을 얻으려면,
모달을 @modal 같은 병렬 슬롯으로 분리한 뒤
그 안에 (.) intercepted route를 두어야 합니다.
이렇게 URL 자체에 배경 경로를 포함시켜야 새로고침이나 직접 접근에서도 리스트 + 모달이 함께 복원되어서요. 다시 말해 default.js만으로는 해결되지 않고, 경로 설계를 함께 바꿔야 해요.
0
안녕하세요, 인프런 AI 인턴입니다. 주구름님.
Parallel Route에 대해 궁금하신 부분은 모달을 구현할 때 유용할 수 있는 기술입니다. Parallel Route를 통해 하드 내비게이션이 불가한 문제를 해결하려면 default.js 같은 전략으로 딥 링크를 제공해야 합니다. 이를 통해 사용자가 URL을 직접 접근하거나 공유하여 이동할 수 있는 특성을 구현할 수 있습니다.
default.js 활용:
- 딥 링크 지원: default.js 구조 안에 라우트의 기본 값을 지정하여 딥 링킹을 지원합니다. 이는 URL이 변경되어도 해당 모달을 유지할 수 있도록 도움을 줍니다.
- 상태 관리: 모달의 상태를 URL 또는 브라우저의 히스토리를 통해 관리하면, 사용자가 새로고침을 하더라도 모달이 열려있도록 유지할 수 있습니다.
이 외에도, Next.js에서의 모달 구현에 대해 좀 더 이해를 도울 수 있는 색션1 예제 코드 질문에 대한 답변 을 참고하시면 도움이 될 것입니다. 해당 링크에서는 Next.js의 프로젝트 예제 코드에 대한 답변이 포함되어 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
명시적 타입 선언(콜론 타입 선언)과 as 타입 단언 차이
0
5
1
max x5 플랜을 결제했습니다.
0
8
1
클로드 초기 설정
0
7
1
사용자 스코프 설정 파일 적용 문제
0
8
1
클로드코드 유료플랜 할인 방법이 있을까요?
0
22
0
제네릭 클래스 핸드북 페이지가 undefined라고 나옵니다.
0
10
1
template 동작 흐름에 대해서 질문 있습니다.
1
70
1
Link 컴포넌트는 그러면 웬만하면 무조건 쓰는편이 좋은가요?
0
82
2
middleware.ts가 proxy.ts로 변경되고 실행 시점도 바뀌었다네요
1
245
2
PPR을 보고 오라고 하시는데
1
82
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
59
1
강의에 언급된 영상 질문
0
70
2
next Request Memoization과 react cache
0
80
1
next.js 서버fetch 에러 fallback ui 구현 방법
0
197
2
필터옵션이 많은 페이지에서도 서버 fetch를 사용하는게 맞을까요??
0
88
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
82
1
template.tsx 에서 서버 fetch 후 클라이언트 컴포넌트로 넘겨주면 싱크가 맞는 이유
1
89
1
layout 컴포넌트 내 클라이언트 컴포넌트
0
84
2
게시판 리스트 작성할 때 use client를 어디서부터 붙여야할지 모르겠어요
0
89
1
'왜 Next.js 가 필요할까?(기술적인 등장 배경)' 에서 언급하는 영상들이 무엇일까요?
0
149
2
유튜브 영상과의 차이점 문의
0
236
1
template.tsx 가 SEO 에 주는 이점에 대한 질문
0
104
2
자동화 스크립트 관련하여 질문있습니다.
0
109
2
색션1 예제 코드 질문드립니다.
0
208
1