[Next.js] 2+α. Modal

모달제작을 통해서

인터셉팅 라우트와 페러렐 라우트를 이해해보자!

 

0. Modal?

리액트에서 모달을 구현하기 위해서는 useState 혹은 전역상태를 사용해야만 했다.

 

그러나 Next.js에서는 "인터셉팅 라우트"와 "페러렐 라우트"를 조합하면

별도의 상태없이도 모달 구현이 가능하다. (+default.tsx)

 

 

1. Intercepting Route

A페이지에서 B페이지로 이동하고자 한다.

원래라면 B페이지로 이동해야 하는데

A페이지에서 B페이지로 이동할 때, B페이지 말고 C페이지를 보여주고 싶을 때

(페이지 이동은 soft navigation event를 의미한다.)

 

현재 주소를 기준으로! (A페이지에서! 라는 기준이 중요하다)

이동은 세그먼트를 기준으로!

 

폴더 이름 앞에 (.) (..) (..)(..) (...)를 사용하여 생성한다.

 

 

2. Parallel Route

하나의 layout에서

둘 이상의 page를 병행해서 보여주고 싶을 때

 

각각의 로딩/에러처리가 가능하다

빠른 화면 출력이 가능하다 (컴포넌트별 출력)

 

폴더 이름 앞에 @을 사용하여 생성한다. (url에 영향 X)

slots 속 page는 slots과 같은 레벨의 레이아웃에 props로 전달된다.

모든 주소에 대한 page 생성이 불가능하기 때문에 default 파일(return null) 생성이 필요하다.

 

 

3. default.tsx

라우팅이 unmatched 될때 렌더링된다.

(parallel route에서 기본값 의미로 사용된다.)

 

 

4. Modal

원하는 모달 형태

뭔가를 누르면 url이 변한다

하지만 그대로의 페이지 위에 모달창만 추가된다

그런데 또 새로고침을 하면 전혀 다른 페이지가 뜬다

 

인터셉팅 라우트 : 하지만 그대로의 페이지 / 새로고침을 하면 전혀 다른 페이지가 뜬다

페러렐 라우트 : 그대로의 페이지 위에 모달창만 추가된다

 

페러렐 라우트로 url에 따라서 추가될 모달창을 제작한다.

인터셉팅 라우트로 페러렐 라우트로 만든 모달창이 등장할 url을 설정한다.