인프런 커뮤니티 질문&답변
작성한 질문수
Parallel Route를 사용한 모달에 대해 질문이 있어요.
해결된 질문
작성
·
67
0
하드 내비게이션(새로고침, 직접 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의 프로젝트 예제 코드에 대한 답변이 포함되어 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.