인터셉팅 라우트

클라이언트 사이드 라우팅이란, 브라우저가 페이지를 새로고침하지 않고 자바스크립트를 통해 URL을 변경하고 이에 따라 화면을 업데이트하는 방식을 말합니다.
이 과정에서 인터셉팅 라우트는 기존의 레이아웃을 유지하면서 새로운 UI를 중첩하여 표시합니다.

예를 들어, 사용자가 메인화면에서 로그인 버튼을 눌러 /i/flow/login 경로로 이동합니다.
이때 라우트 변경은 클라이언트에서 처리되면, 새로운 UI는 기존 레이아웃 위에 중첩됩니다.

1. 기존 레이아웃 유지: layout.tsx 파일의 children 속성으로 전달되는, 메인 화면의 콘텐츠는 변하지 않고 그대로 유지합니다.
2. @modal 슬롯 활용: 새로운 UI는 @modal 슬롯을 통해 layout.tsx 파일에서 modal 속성으로 전달됩니다.
3. 모달 형태로 렌더링: 새로운UI는 기존 화면 위에 모달 형태로 표시됩니다.

이로 인해 사용자는 페이지가 전환되는 느낌을 받지 않고 부드럽게 새로운 화면과 상호작용할 수 있습니다.

초기 렌더링

반면, 사용자가 /i/flow/login URL에서 브라우저 새로고침을 실행하면 상황이 달라집니다.
브라우저는 해당 URL에 대한 초기 렌더링을 수행하며, 이 과정에서 전역 레이아웃이 다시 적용됩니다.
결과적으로 새로운 UI는 기존의 modal 슬롯이 아닌 전체 화면 레이아웃에 직접 렌더링됩니다.

이 경우 인터셉팅라우트로 동작했을 때와 차이점이 있습니다.

1. 기본 레이아웃 적용: 초기 렌더링은 URL과 일치하는 기본 레이아웃을 로드하며, 기존 화면은 더 이상 유지되지 않습니다.
2. 전체 화면으로 표시: 새로운UI는 기존 콘텐츠와 겹치지 않고 전체 화면의 주요 구성요소로 렌더링됩니다.