Modals

Modals

Intercepting Routes

변경파일

• app/(tabs)/home/(..)products/[id]/page.tsx
• 파일 이동
  app/(tabs)/products/actions.ts →
  app/(tabs)/home/actions.ts, /loading.tsx, /page.tsx
• app/products/[id]/page.tsx
• components/product-list.tsx
• components/tab-bar.tsx

• middleware.ts

• 사용자가 product/[id]를 가려했을 때 그 페이지 대신 다른 component를 보여줄 수 있음
• app/(tabs)/home/(..)products/[id]/page.tsx :
  app/(tabs)/home/(..)products/[id]/page.tsx는 home 경로에서 상위로 이동(..), products 경로로 다시 들어가 [id] 경로를 처리한다.
• URL 경로는 /products/[id] 형태가 됨

Intercepting Recap

Parallel Routes

• 같은 페이지에 여러 component를 렌더링하기
• 용례 : 나만의 로딩 페이지를 추가할 수 있음, 에러 제어

변경파일

• app/@potato/page.tsx
• app/layout.tsx

Default Routes

• 기본으로 렌더링 될 페이지
• NextJS가 modal영역에 넣을 컴포넌트를 찾지 못할 때마다 사용됨
• 꼭 default.tsx로 적어줘야 인식 함

Modal Route

하드 리프레시(hard refresh)”와 “소프트 리프레시(soft refresh)의 차이점

페이지를 새로 고치는 방법의 차이를 나타내며, 두 가지는 캐시 데이터를 처리하는 방식에 차이가 있다.
하드 리프레시 (Hard Refresh)
하드 리프레시는 웹 페이지를 새로 고칠 때 브라우저 캐시를 무시하고 서버에서 최신 데이터를 강제로 가져오는 방법
하드 리프레시를 사용하면 웹 페이지의 모든 요소(HTML, CSS, JavaScript, 이미지 등)가 다시 로드된다.
주요 특징
캐시 무시: 브라우저가 캐시된 데이터를 사용하지 않고 서버에서 최신 버전을 가져온다.
완전한 새로 고침: 페이지의 모든 리소스가 다시 로드되므로, 변경된 내용이 즉시 반영된다.

소프트 리프레시 (Soft Refresh)
소프트 리프레시는 기본적인 페이지 새로 고침 방법으로, 브라우저가 가능하면 캐시된 데이터를 사용하여 페이지를 새로 고친다. 소프트 리프레시를 사용하면 서버에서 변경되지 않은 리소스를 다시 다운로드하지 않기 때문에 로딩 시간이 단축될 수 있다.
주요 특징
캐시 사용: 브라우저가 캐시된 리소스를 사용하여 페이지를 새로 고침
빠른 로딩: 서버에서 변경된 부분만 다시 다운로드하므로 로딩 시간이 단축됨

변경파일

• app/(tabs)/home/(…)products/[id]/page.tsx → …)/home/@modal/(…)products/[id]/page.tsx
• app/(tabs)/home/@modal/default.tsx
• app/(tabs)/home/@modal/loading.tsx
• app/(tabs)/home/layout.tsx
• @potato 삭제, app/layout.tsx에서도 관련 코드 제거

Modal UI

변경파일

• app/(tabs)/home/@modal/(…)products/[id]/page.tsx
• components/tab-bar.tsx