M

MLOG

한국어

Next.js 인터셉션 라우트에 대한 심층 분석으로, 향상된 사용자 경험을 위한 실용적인 모달 및 오버레이 구현 전략을 소개합니다.

Next.js 인터셉션 라우트: 모달 및 오버레이 패턴 마스터하기

인기 있는 React 프레임워크인 Next.js는 고성능의 확장 가능한 웹 애플리케이션을 구축하기 위한 강력한 기능들을 제공합니다. 그중 하나인 인터셉션 라우트(Interception Routes)는 복잡한 라우팅 시나리오, 특히 모달 및 오버레이 패턴을 구현할 때 정교한 방법을 제공합니다. 이 종합 가이드에서는 인터셉션 라우트를 활용하여 원활하고 매력적인 사용자 경험을 만드는 방법을 탐색합니다.

인터셉션 라우트란 무엇인가?

인터셉션 라우트를 사용하면 브라우저의 URL을 변경하지 않고도 라우트를 가로채 다른 UI를 렌더링할 수 있습니다. 사용자 경험을 풍부하게 하는 일시적인 우회로라고 생각하면 됩니다. 이는 특히 다음과 같은 경우에 유용합니다:

모달 및 오버레이에 인터셉션 라우트를 사용하는 이유는 무엇인가?

모달 및 오버레이를 처리하는 전통적인 방법은 종종 컴포넌트 내에서 상태를 관리해야 하므로 복잡해지고 성능 문제를 야기할 수 있습니다. 인터셉션 라우트는 여러 가지 이점을 제공합니다:

Next.js에서 인터셉션 라우트 설정하기

실용적인 예제를 통해 인터셉션 라우트를 구현하는 방법을 설명해 보겠습니다: 전자 상거래 애플리케이션에서 제품 상세 정보를 표시하기 위한 모달 만들기.

프로젝트 구조

먼저, 디렉토리 구조를 정의해 보겠습니다. 각 제품에 고유 ID가 있는 `products` 디렉토리가 있다고 가정합니다.

app/
  products/
    [id]/
      page.js       // Product details page
    @modal/
      [id]/
        page.js   // Modal content for product details
    default.js  // Layout for products directory
  page.js           // Home page

설명

코드 구현

1. 홈페이지 (app/page.js)

이 페이지는 제품 목록을 표시하며, 각 제품에는 제품 상세 정보를 모달로 여는 링크가 있습니다.

// app/page.js
import Link from 'next/link';

const products = [
 { id: '1', name: 'Laptop' },
 { id: '2', name: 'Smartphone' },
 { id: '3', name: 'Tablet' },
];

export default function Home() {
 return (
 

 
Product List

 
    
 {products.map((product) => (
 
  • 
 
 {product.name}
 
 
    • 
 ))}
 

 

 );
}

2. 제품 상세 페이지 (app/products/[id]/page.js)

이 페이지는 전체 제품 상세 정보를 렌더링합니다. 실제 애플리케이션에서는 API나 데이터베이스에서 데이터를 가져올 것입니다. 중요하게, 원래 제품 목록으로 돌아가는 링크를 제공합니다.

// app/products/[id]/page.js
import Link from 'next/link';

export default function ProductDetails({ params }) {
 const { id } = params;

 return (
 

 
Product Details

 
Product ID: {id}

 
This is the full product details page.

 Back to Product List
 

 );
}

3. 모달 콘텐츠 (app/products/@modal/[id]/page.js)

이 부분이 핵심인 인터셉션 라우트입니다. 동일한 제품 ID를 사용하여 모달 콘텐츠를 렌더링합니다. ID에 접근하기 위해 `useParams` 훅을 사용하는 점에 주목하세요.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import styles from './modal.module.css';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;

 return (
 

 

 
Product Modal

 
Product ID: {id}

 
This content is rendered within a modal!

  history.back()}>Close Modal
 

 

 );
}

참고: `'use client';` 지시문은 클라이언트 측 상호작용, 특히 `useParams`를 사용할 때 필요합니다.

스타일링 (modal.module.css): 기본 모달 스타일링을 위해 간단한 CSS 모듈이 사용됩니다. 이는 모달을 올바르게 배치하는 데 중요합니다.

/* modal.module.css */

.modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure it's on top */
}

.modalContent {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 80%;
  max-width: 600px;
}

4. 레이아웃 (app/products/default.js)

이 레이아웃은 `@modal` 라우트를 감싸서 제품 컨텍스트 내에서 렌더링되도록 보장합니다.

// app/products/default.js
export default function ProductsLayout({ children }) {
 return (
 

 {children}
 

 );
}

작동 방식

  1. 사용자가 홈페이지에서 제품 링크(예: `/products/1`)를 클릭하면 Next.js는 이를 `products` 디렉토리 내의 라우트로 인식합니다.
  2. `@modal` 인터셉션 라우트 때문에 Next.js는 `@modal` 아래에 일치하는 라우트가 있는지 확인합니다.
  3. 일치하는 항목(예: `/products/@modal/1`)이 발견되면 Next.js는 `app/products/@modal/[id]/page.js`의 콘텐츠를 현재 페이지 내에서 렌더링합니다. 브라우저의 URL은 `/products/1`로 유지됩니다.
  4. `modalOverlay` 스타일은 모달을 기본 콘텐츠 위에 위치시킵니다.
  5. "모달 닫기"를 클릭하면 `history.back()`을 사용하여 뒤로 이동하며, 효과적으로 모달을 닫고 이전 상태로 돌아갑니다.

고급 인터셉션 라우트 기법

1. 뒤로 가기 버튼 처리

모달 구현의 중요한 측면은 브라우저의 뒤로 가기 버튼이 올바르게 작동하도록 보장하는 것입니다. 사용자가 모달을 열고 뒤로 가기 버튼을 클릭하면, 애플리케이션에서 다른 곳으로 이동하는 것이 아니라 이상적으로는 모달을 닫고 이전 컨텍스트로 돌아가야 합니다.

예제에서 사용된 `history.back()` 메서드는 브라우저 히스토리에서 한 단계 뒤로 이동하여 이 효과를 달성합니다. 그러나 더 복잡한 시나리오에서는 현재 라우팅 상태를 고려하는 사용자 정의 뒤로 가기 버튼 핸들러를 구현해야 할 수도 있습니다.

2. 동적 모달 콘텐츠

실제 애플리케이션에서는 모달 콘텐츠가 제품 ID를 기반으로 API나 데이터베이스에서 가져온 동적인 내용일 가능성이 높습니다. 모달 컴포넌트 내에서 `fetch` API나 SWR 또는 React Query와 같은 데이터 가져오기 라이브러리를 사용하여 필요한 데이터를 검색할 수 있습니다.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import { useState, useEffect } from 'react';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;
 const [product, setProduct] = useState(null);

 useEffect(() => {
 async function fetchProduct() {
 const res = await fetch(`/api/products/${id}`); // Replace with your API endpoint
 const data = await res.json();
 setProduct(data);
 }

 fetchProduct();
 }, [id]);

 if (!product) {
 return 
Loading...
;
 }

 return (
 

 
{product.name}

 
{product.description}

 {/* ... other product details ... */}
  history.back()}>Close Modal
 

 );
}

3. 중첩된 모달

인터셉션 라우트를 중첩하여 복잡한 모달 워크플로우를 만들 수 있습니다. 예를 들어, 사용자가 제품 상세 모달을 열고 버튼을 클릭하여 관련 제품 모달을 열 수 있습니다. 이는 `@modal` 디렉토리 내에 추가적인 인터셉션 라우트를 생성하여 달성할 수 있습니다.

4. 404 오류 처리

사용자가 유효하지 않은 제품 ID(예: `/products/@modal/nonexistent`)를 가진 모달 URL로 이동하는 시나리오를 고려해야 합니다. 사용자 친화적인 404 페이지를 표시하거나 사용자를 유효한 제품 페이지로 리디렉션하는 적절한 오류 처리를 구현해야 합니다.

// app/products/@modal/[id]/page.js

// ... (rest of the component)

 if (!product) {
 return 
Product not found.
; // Or redirect to a 404 page
 }

// ... (rest of the component)

5. 오버레이 패턴

지금까지의 예제는 모달에 중점을 두었지만, 인터셉션 라우트는 오버레이에도 사용할 수 있습니다. 콘텐츠를 중앙에 배치하는 대신, 오버레이는 사이드바나 화면 측면에서 슬라이드되는 패널로 나타날 수 있습니다. CSS 스타일링은 다르겠지만, 라우팅 로직은 동일하게 유지됩니다.

실제 사례 및 사용 예시

예시: 국제 전자상거래 플랫폼 글로벌 전자상거래 사이트를 상상해 보세요. 사용자가 제품을 클릭하면 상세 정보가 모달로 열립니다. URL은 `/products/[product_id]`로 변경되어 직접 링크 및 SEO 이점을 제공합니다. 사용자가 모달 페이지에서 언어를 전환하면(예: 영어에서 스페인어로), 제품 상세 정보는 선택된 언어로 가져와지고 모달 콘텐츠는 원활하게 업데이트됩니다. 또한, 사이트는 (동의 하에) 사용자의 위치를 감지하고 해당 지역과 관련된 배송 정보를 모달 내에 표시할 수 있습니다.

인터셉션 라우트 사용을 위한 모범 사례

인터셉션 라우트의 대안

인터셉션 라우트는 모달 및 오버레이 패턴에 대한 강력한 해결책을 제공하지만, 다른 접근 방식도 고려할 수 있습니다:

결론

Next.js 인터셉션 라우트는 웹 애플리케이션에서 모달 및 오버레이 패턴을 구현하는 견고하고 우아한 방법을 제공합니다. 이 강력한 기능을 활용하여 원활하고 SEO 친화적이며 사용자 친화적인 경험을 만들 수 있습니다. 대안적인 접근 방식이 존재하지만, 인터셉션 라우트는 독특한 조합의 이점을 제공하여 모든 Next.js 개발자의 무기고에서 가치 있는 도구가 됩니다.

추가 자료