inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로

state 없이 modal 을 구현하는 새로운 방법?!

Parallel Route를 사용한 모달에 대해 질문이 있어요.

해결된 질문

112

주구름

작성한 질문수 7

0

하드 내비게이션(새로고침, 직접 URL 접근) 불가라고 하셨는데, default.js를 활용하면, 딥 링킹과 공유 가능 URL을 지원할 수 있는걸까요??

react typescript next.js

답변 2

1

Boaz

정확하게 보셨어요 default.js를 잘 활용하면, 그와함께 경로 설계를 함께 바꾼다면 가능해요..!
default.js는 슬롯이 비어 있을 때 보여 줄 기본 화면만 담당해서요.

딥 링킹과 공유 가능한 URL을 얻으려면,

  1. 모달을 @modal 같은 병렬 슬롯으로 분리한 뒤

  2. 그 안에 (.) intercepted route를 두어야 합니다.

     

이렇게 URL 자체에 배경 경로를 포함시켜야 새로고침이나 직접 접근에서도 리스트 + 모달이 함께 복원되어서요. 다시 말해 default.js만으로는 해결되지 않고, 경로 설계를 함께 바꿔야 해요.

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 주구름님.

Parallel Route에 대해 궁금하신 부분은 모달을 구현할 때 유용할 수 있는 기술입니다. Parallel Route를 통해 하드 내비게이션이 불가한 문제를 해결하려면 default.js 같은 전략으로 딥 링크를 제공해야 합니다. 이를 통해 사용자가 URL을 직접 접근하거나 공유하여 이동할 수 있는 특성을 구현할 수 있습니다.

default.js 활용:
- 딥 링크 지원: default.js 구조 안에 라우트의 기본 값을 지정하여 딥 링킹을 지원합니다. 이는 URL이 변경되어도 해당 모달을 유지할 수 있도록 도움을 줍니다.
- 상태 관리: 모달의 상태를 URL 또는 브라우저의 히스토리를 통해 관리하면, 사용자가 새로고침을 하더라도 모달이 열려있도록 유지할 수 있습니다.

이 외에도, Next.js에서의 모달 구현에 대해 좀 더 이해를 도울 수 있는 색션1 예제 코드 질문에 대한 답변 을 참고하시면 도움이 될 것입니다. 해당 링크에서는 Next.js의 프로젝트 예제 코드에 대한 답변이 포함되어 있습니다.

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

my-style.md 만들기 미션

0

7

1

노션 : 파트3번 링크와 권한 , 파트4번 권한요청, 파트 5번도 미리 요청 드립니다.

0

18

4

스킬, 플러그인, 마켓플레이스 관련 문의

0

21

2

클로드 코드 요금제 대신 사용량 기반 과금제를 사용하고 있습니다.

0

22

2

25강부터 소리만 나오고 화면이 안나옵니다.

0

24

1

useEffect와 lifecycle문의

0

20

2

template 동작 흐름에 대해서 질문 있습니다.

1

69

1

Link 컴포넌트는 그러면 웬만하면 무조건 쓰는편이 좋은가요?

0

82

2

middleware.ts가 proxy.ts로 변경되고 실행 시점도 바뀌었다네요

1

239

2

PPR을 보고 오라고 하시는데

1

82

2

useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩

0

59

1

강의에 언급된 영상 질문

0

70

2

next Request Memoization과 react cache

0

79

1

next.js 서버fetch 에러 fallback ui 구현 방법

0

197

2

필터옵션이 많은 페이지에서도 서버 fetch를 사용하는게 맞을까요??

0

88

2

서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.

0

81

1

template.tsx 에서 서버 fetch 후 클라이언트 컴포넌트로 넘겨주면 싱크가 맞는 이유

1

88

1

layout 컴포넌트 내 클라이언트 컴포넌트

0

84

2

게시판 리스트 작성할 때 use client를 어디서부터 붙여야할지 모르겠어요

0

88

1

'왜 Next.js 가 필요할까?(기술적인 등장 배경)' 에서 언급하는 영상들이 무엇일까요?

0

148

2

유튜브 영상과의 차이점 문의

0

235

1

template.tsx 가 SEO 에 주는 이점에 대한 질문

0

104

2

자동화 스크립트 관련하여 질문있습니다.

0

109

2

색션1 예제 코드 질문드립니다.

0

208

1