M

MLOG

한국어

Next.js 병렬 라우트 탐구: 여러 독립적인 섹션으로 동적이고 유연한 페이지 레이아웃을 구축하는 포괄적인 가이드. 구현, 이점 및 모범 사례를 알아보세요.

Next.js 병렬 라우트: 동적 페이지 레이아웃 구축

선도적인 React 프레임워크인 Next.js는 최신 웹 애플리케이션을 구축하기 위한 강력한 도구를 개발자에게 제공하기 위해 끊임없이 진화하고 있습니다. 최근 버전에 도입된 가장 흥미로운 기능 중 하나는 병렬 라우트입니다. 이 기능을 사용하면 동일한 페이지 레이아웃 내에서 여러 개의 독립적인 섹션을 렌더링할 수 있어 애플리케이션의 구조와 사용자 경험을 유례없이 유연하게 제어할 수 있습니다.

병렬 라우트란 무엇인가요?

전통적으로 Next.js의 라우트는 단일 페이지 컴포넌트에 해당합니다. 다른 라우트로 이동하면 전체 페이지가 다시 렌더링됩니다. 병렬 라우트는 각자 독립적인 라우트 세그먼트로 관리되는 여러 컴포넌트를 동일한 레이아웃 내에서 동시에 렌더링할 수 있도록 하여 이러한 패러다임을 깨뜨립니다. 이를 페이지를 고유한 섹션으로 나누고 각 섹션에 자체 URL과 수명 주기가 있으며 모두 단일 화면에 공존하는 것으로 생각할 수 있습니다.

이를 통해 더 복잡하고 동적인 사용자 인터페이스를 만들 수 있는 많은 가능성이 열립니다. 예를 들어 병렬 라우트를 사용하여 다음을 수행할 수 있습니다.

개념 이해: 슬롯

병렬 라우트의 핵심 개념은 "슬롯"이라는 개념입니다. 슬롯은 특정 라우트 세그먼트가 렌더링되는 레이아웃 내의 명명된 영역입니다. 슬롯 이름 뒤에 @ 기호를 사용하여 app 디렉토리에서 이러한 슬롯을 정의합니다. 예를 들어 @sidebar는 "sidebar"라는 슬롯을 나타냅니다.

그런 다음 각 슬롯을 라우트 세그먼트와 연결할 수 있습니다. 사용자가 특정 라우트로 이동하면 Next.js는 해당 라우트 세그먼트와 연결된 컴포넌트를 레이아웃의 해당 슬롯에 렌더링합니다.

구현: 실용적인 예시

병렬 라우트가 어떻게 작동하는지 실용적인 예시로 설명해 보겠습니다. 전자 상거래 애플리케이션을 구축하고 있으며 제품 상세 페이지를 영구적인 장바구니 사이드바와 함께 표시하려는 경우를 생각해 보세요.

1. 디렉토리 구조

먼저 애플리케이션의 디렉토리 구조를 정의해 보겠습니다.

app/
  product/
    [id]/
      @cart/
        page.js  // 쇼핑 카트 컴포넌트
      page.js      // 제품 상세 정보 컴포넌트
    layout.js   // 제품 레이아웃
  layout.js     // 루트 레이아웃

각 파일이 나타내는 것은 다음과 같습니다.

2. 루트 레이아웃 (app/layout.js)

루트 레이아웃에는 일반적으로 머리글 및 바닥글과 같이 전체 애플리케이션에서 공유되는 요소가 포함됩니다.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    
      
        
내 전자 상거래 앱

        {children}
        
© 2024

      
    
  );
}

3. 제품 레이아웃 (app/product/[id]/layout.js)

이것이 슬롯을 정의하는 중요한 부분입니다. 주요 제품 페이지와 카트의 컴포넌트를 page.js 및 @cart/page.js에 해당하는 props로 받습니다.

// app/product/[id]/layout.js
export default function ProductLayout({ children, cart }) {
  return (
    

      
{children}

      
    

  );
}

이 예시에서는 간단한 플렉스박스 레이아웃을 사용하여 주요 제품 콘텐츠와 카트 사이드바를 나란히 배치하고 있습니다. children prop에는 app/product/[id]/page.js의 렌더링된 출력이 포함되고 cart prop에는 app/product/[id]/@cart/page.js의 렌더링된 출력이 포함됩니다.

4. 제품 상세 정보 페이지 (app/product/[id]/page.js)

이것은 id 매개변수를 기반으로 제품 상세 정보를 표시하는 표준 동적 라우트 페이지입니다.

// app/product/[id]/page.js
export default async function ProductDetails({ params }) {
  const { id } = params;
  // ID를 기반으로 제품 데이터 가져오기
  const product = await fetchProduct(id);

  return (
    

      
제품 상세 정보

      
{product.name}

      
{product.description}

      
가격: ${product.price}

    

  );
}

async function fetchProduct(id) {
  // 실제 데이터 가져오기 로직으로 바꾸십시오.
  return new Promise(resolve => setTimeout(() => {
    resolve({ id, name: `제품 ${id}`, description: `제품 ${id} 설명`, price: 99.99 });
  }, 500));
}

5. 쇼핑 카트 컴포넌트 (app/product/[id]/@cart/page.js)

이 컴포넌트는 @cart 슬롯에 렌더링될 쇼핑 카트를 나타냅니다.

// app/product/[id]/@cart/page.js
export default function ShoppingCart() {
  return (
    

      
쇼핑 카트

      
카트에 있는 항목: 3

      
    

  );
}

설명

사용자가 /product/123으로 이동하면 Next.js는 다음과 같이 수행합니다.

  1. 루트 레이아웃 (app/layout.js)을 렌더링합니다.
  2. 제품 레이아웃 (app/product/[id]/layout.js)을 렌더링합니다.
  3. 제품 레이아웃 내에서 제품 상세 정보 컴포넌트 (app/product/[id]/page.js)를 children prop으로 렌더링합니다.
  4. 동시에 쇼핑 카트 컴포넌트 (app/product/[id]/@cart/page.js)를 cart prop으로 렌더링합니다.

그 결과 단일 레이아웃 내에서 모두 렌더링되는 영구적인 쇼핑 카트 사이드바가 있는 제품 상세 정보 페이지가 표시됩니다.

병렬 라우트 사용의 이점

고려 사항 및 모범 사례

고급 사용법: 조건부 렌더링 및 동적 슬롯

병렬 라우트는 정적 슬롯 정의로 제한되지 않습니다. 조건부 렌더링 및 동적 슬롯을 사용하여 더욱 유연한 레이아웃을 만들 수도 있습니다.

조건부 렌더링

사용자 역할, 인증 상태 또는 기타 요소를 기반으로 슬롯에서 다른 컴포넌트를 조건부로 렌더링할 수 있습니다.

// app/product/[id]/layout.js
import { getUserRole } from '../../utils/auth';

export default async function ProductLayout({ children, cart }) {
  const userRole = await getUserRole();

  return (
    

      
{children}

      
    

  );
}

function AdminPanel() {
  return (
    

      
관리자 패널

      
여기에서 제품 상세 정보를 관리하세요.

    

  );
}

이 예시에서 사용자가 'admin' 역할을 가지고 있으면 쇼핑 카트 대신 AdminPanel 컴포넌트가 @cart 슬롯에 렌더링됩니다.

동적 슬롯

덜 일반적이지만, 이론적으로 슬롯 이름을 동적으로 구성할 수 있지만 복잡성과 잠재적인 성능 영향으로 인해 일반적으로 권장하지 않습니다. 미리 정의되고 잘 이해되는 슬롯을 고수하는 것이 좋습니다. 동적 "슬롯"의 필요성이 발생하는 경우, props가 있는 표준 React 컴포넌트 사용 및 조건부 렌더링과 같은 대체 솔루션을 고려하십시오.

실제 예시 및 사용 사례

다양한 유형의 애플리케이션에서 병렬 라우트를 사용할 수 있는 몇 가지 실제 예시를 살펴보겠습니다.

결론

Next.js 병렬 라우트는 동적이고 유연한 웹 애플리케이션을 구축하기 위한 새로운 가능성을 열어주는 강력한 기능입니다. 동일한 페이지 레이아웃 내에서 여러 개의 독립적인 섹션을 렌더링할 수 있도록 함으로써 병렬 라우트를 통해 더욱 매력적인 사용자 경험을 만들고 코드 재사용성을 높이며 개발 프로세스를 단순화할 수 있습니다. 잠재적인 복잡성을 고려하고 모범 사례를 따르는 것이 중요하지만, 병렬 라우트를 마스터하면 Next.js 개발 기술을 크게 향상시키고 진정으로 혁신적인 웹 애플리케이션을 구축할 수 있습니다.

Next.js가 계속 발전함에 따라 병렬 라우트는 웹에서 가능한 범위를 넓히려는 개발자에게 점점 더 중요한 도구가 될 것입니다. 이 가이드에 설명된 개념을 실험하고 병렬 라우트가 최신 웹 애플리케이션 구축에 대한 접근 방식을 어떻게 변화시킬 수 있는지 알아보십시오.