intercepting routes 언제쓸까? modal 의 context 를 유지하는 방법!

intercepting routes는 parallel routes와 함께 사용하여 모달의 컨텍스트를 유지하는 핵심 기능입니다. 🔄
"컨텍스트 유지"는 모달이 열린 상태에서 페이지를 새로고침해도 모달은 닫히지만, 사용자가 보고 있던 기본 페이지(컨텍스트)가 유지되는 것을 의미합니다. 🖼️
예시로, 첫 방문자를 위한 가이드 모달이 새로고침 시 닫히더라도, 사용자는 가이드 페이지 또는 랜딩 페이지에 머무르게 됩니다. 📖
intercepting routes는 클라이언트 사이드 라우팅 시 특정 경로 이동을 가로채어, 원래 페이지 대신 모달을 우선적으로 렌더링합니다. 🚀
이는 폴더 구조에서 (.) 또는 (..)와 같은 표기법을 사용하여 상위 경로를 인터셉트함으로써 구현됩니다. 📁
렌더링 우선순위: 클라이언트 사이드 라우팅 시에는 인터셉트된 모달이, 전체 페이지 새로고침 시에는 실제 페이지가 렌더링됩니다. 🚦
모달 표시 조건은 localStorage에 저장된 플래그(예: isGuideModalOpened)를 useEffect를 사용하는 클라이언트 컴포넌트에서 확인하여 제어합니다. 💾
개발 중 라우팅 우선순위가 꼬이는 문제가 발생할 수 있으며, 이때는 .next 폴더를 삭제하고 개발 서버를 재시작하여 캐시를 초기화하면 해결됩니다. 🛠️

로딩 중...