18,817 판독값

Next.Js 13가지 병렬 경로: 종합 가이드

~에 의해 Leandro Nuñez8m2023/08/17

너무 오래; 읽다

이 글은 Next.js 13.3 - 병렬 경로에 도입된 강력한 기능을 이해하기 위해 꼼꼼하게 작성되었습니다.

People Mentioned

featured image - Next.Js 13가지 병렬 경로: 종합 가이드

1. 소개

안녕!

Next.js의 병렬 경로에 대한 포괄적인 가이드에 오신 것을 환영합니다.

디지털 환경이 발전함에 따라 웹 개발도 복잡해졌습니다. 최신 웹 애플리케이션에는 사용자 경험을 향상하고 복잡한 디자인 구조를 수용하기 위해 강력할 뿐만 아니라 다양한 라우팅 메커니즘도 필요합니다.

이 글은 Next.js 13.3 - 병렬 경로에 도입된 강력한 기능을 이해하기 위해 꼼꼼하게 작성되었습니다.

목표는 두 가지입니다. 첫째, 병렬 경로의 중요성과 실제 적용에 대한 명확한 이해를 제공하고, 둘째, Next.js 프로젝트에서 병렬 경로를 효율적으로 구현하는 데 대한 실무적인 통찰력을 제공하는 것입니다.

병렬 경로의 혁신적인 잠재력과 웹 애플리케이션 디자인의 경계를 어떻게 재정의하는지 알아보기 위한 여정을 시작하겠습니다.

2. 평행선 이전의 세계

병렬 경로가 도입되기 전에는 웹 개발자가 단일 보기에서 콘텐츠를 동적으로 구성하고 표시하는 방법이 제한되었습니다. 기존의 라우팅 메커니즘은 하나의 URL, 하나의 보기 등 상당히 선형적이었습니다.

예를 들어 일반적인 대시보드 디자인을 고려해보세요.

 // pages/dashboard/user.js function User() { return <div>User Dashboard</div>; } // pages/dashboard/team.js function Team() { return <div>Team Dashboard</div>; }

/dashboard/user 로 이동하면 사용자 대시보드가 렌더링되고 /dashboard/team 팀 대시보드가 표시됩니다. 둘은 상호 배타적이었습니다. 다른 세그먼트를 보려면 일반적으로 사용자는 현재 보기에서 완전히 벗어나야 합니다.

특히 개발자가 웹 사이트의 여러 세그먼트를 동시에 또는 조건부로 표시하려고 할 때 이는 문제를 야기했습니다. 기존의 라우팅 접근 방식에는 유연성이 부족하여 복잡한 상태 관리나 해결 방법을 사용하지 않고 병렬 대시보드나 모달과 같은 복잡한 대화형 레이아웃을 만드는 것이 어렵습니다.

다행히도 Next.js와 같은 프레임워크의 발전과 병렬 경로의 도입으로 이러한 환경이 크게 바뀌어 역동적이고 적응력이 뛰어난 웹 디자인의 새로운 시대가 열렸습니다.

3. 병렬 경로 이해

병렬 경로는 Next.js 13.3에 도입된 획기적인 기능으로, 개발자가 웹에서 라우팅 및 콘텐츠 표시에 접근하는 방식을 크게 변화시켰습니다.

3.1 병렬 경로 소개:

Next.js 13.3은 새로운 동적 규칙을 도입하여 보다 고급 라우팅 사례를 구현할 수 있습니다. 문서에 명시된 바와 같이,

"병렬 경로를 사용하면 복잡한 대시보드나 모달처럼 동일한 보기에 두 개 이상의 페이지를 표시할 수 있습니다. 병렬 경로를 사용하면 독립적으로 탐색할 수 있는 동일한 보기에서 하나 이상의 페이지를 동시에 렌더링할 수 있습니다."

간단히 말해서, 앱의 다양한 구성 요소 또는 섹션을 동시에 로드할 수 있어 유동성과 반응성을 제공할 수 있습니다. 특히 특정 구성 요소가 데이터를 가져오거나 렌더링하는 데 시간이 오래 걸리는 경우 더욱 그렇습니다.

3.2 사용 사례: 대시보드, 모달 등:

최신 웹 애플리케이션의 구조에는 기본 콘텐츠를 잃지 않고 여러 보기를 결합하거나 상황별 팝업을 요구하는 고급 레이아웃이 필요한 경우가 많습니다.

문서에서 예를 들어보세요.

 dashboard |__ @user |____ page.js |__ @team |____ page.js |__layout.js |__ page.js

이 레이아웃은 병렬 경로를 사용하여 이 새로운 라우팅 접근 방식의 기본 기능인 명명된 "슬롯"을 사용하여 동일한 보기에 사용자와 팀 대시보드를 동시에 표시할 수 있는 방법을 보여줍니다.

3.3 이점: 여러 페이지 보기, 조건부 렌더링, 독립 탐색:

병렬 경로의 장점은 다양합니다. 강조된 바와 같이, 그들은 다음을 허용합니다:

"독립적으로 탐색할 수 있는 동일한 보기에서 하나 이상의 페이지를 동시에 렌더링합니다."

또한 페이지의 조건부 렌더링에 활용될 수 있으므로 웹 애플리케이션에 전례 없는 수준의 유연성과 역동성을 제공합니다.

본질적으로 병렬 경로의 출현으로 웹 개발자는 이제 현대 웹의 진화하는 요구에 맞게 맞춤 제작된 복잡하고 역동적이며 사용자 친화적인 웹 인터페이스를 구축할 수 있는 능력을 더 잘 갖추게 되었습니다.

4. 병렬 경로의 작동 방식

병렬 경로에 대해 더 자세히 알아보면 Next.js 13.3이 얼마나 스마트하게 구축되었는지 알 수 있습니다. 세부사항을 단계별로 살펴보겠습니다.

4.1 "슬롯" 및 @folder 규칙 소개:

"슬롯"의 개념은 병렬 경로의 핵심입니다. 슬롯을 웹사이트의 다양한 페이지나 일부를 표시할 수 있는 지정된 영역으로 생각하세요.

@folder 규칙은 문서의 참고 사항에서 알 수 있듯이 이러한 슬롯을 설정하는 데 사용되는 방법입니다.

"병렬 경로는 @folder 메서드를 사용하여 정의된 '슬롯'이라는 이름을 사용합니다."

코드 설명:
- 병렬 경로의 폴더 구조: 다음 예를 고려하십시오.
```
 dashboard |__ @user │____ page.js |__ @team |____ page.js |__ layout.js |__ utilities.js |__ page.js
```
  여기서 '@user'와 '@team'은 다양한 콘텐츠에 대한 컨테이너 역할을 하여 웹사이트를 보다 유연하게 디자인할 수 있습니다.
- 레이아웃이 슬롯을 소품으로 사용하는 방법: 문서에 따르면 동일한 경로 세그먼트 내의 레이아웃은 이러한 슬롯을 소품으로 활용할 수 있습니다. 명확한 예는 다음과 같습니다.
```
 export default async function Layout({ children, user, team }) { const userType = getCurrentUserType(); return ( <> {userType === 'user' ? user : team} {children} </> ); }
```
- 참고: 위 코드에서 getCurrentUserType() 함수는 사용자 유형을 결정하는 데 사용되며, 이는 user 또는 team 슬롯이 표시되는지 여부를 나타냅니다.
암시적 경로 슬롯과 명시적 경로 슬롯: Next.js 라우팅의 장점 중 하나는 유연성입니다. 이 예에서 '@user' 및 '@team'은 우리가 정의한 명시적 슬롯( @folder 에 직접 연결됨)이지만 암시적 또는 자동 슬롯도 있습니다.
문서에서는 다음과 같이 설명합니다.
" children 이런 종류의 자동 슬롯이므로 @folder 와 연결할 필요가 없습니다. 따라서 dashboard/page.js dashboard/@children/page.js 와 동일하게 작동합니다."

병렬 경로가 어떻게 작동하는지 철저하게 파악함으로써 개발자는 Next.js 13의 기능을 최적화하여 보다 직관적이고 적응 가능한 웹 사이트를 만들 수 있습니다.

5. 병렬 경로 사용 방법에 대한 단계별 가이드

5.1 새로운 Next.js 앱 설정

새로운 Next.js 애플리케이션을 생성하여 시작하세요.

 npx create-next-app@latest parallel-routes

새로 생성된 앱의 디렉터리로 이동합니다.

 cd parallel-routes

개발 서버를 시작합니다.

 yarn dev

5.2 앱 구조화

프로젝트 디렉터리에서 다음 폴더와 파일을 만듭니다.

 app |__ @folder1 |____ page.js |__ @folder2 |____ page.js |__ page.js |__ layout.js

5.3 컴포지션 생성 및 데이터 로딩 시뮬레이션

app/@folder1/page.js 에서는 구성 요소가 로드되는 시각적 순서를 이해하기 위해 로드 시간을 표시하고 시뮬레이션하는 구성 요소를 만듭니다.

 export default async function Page() { // simulate loading time for 6 seconds await new Promise(resolve => setTimeout(resolve, 6000)); return <h4>FOLDER 1 COMPONENT LOADED</h4> }

마찬가지로, app/@folder2/page.js 에서는 다음과 같습니다.

 export default async function Page() { // simulate loading time for 8 seconds await new Promise(resolve => setTimeout(resolve, 8000)); return <h4>FOLDER 2 COMPONENT LOADED TWO SECONDS LATER</h4> }

이러한 시뮬레이션된 로딩 시간을 통해 병렬 경로의 기능을 시각적으로 평가할 수 있습니다.

5.4 레이아웃 코드 업데이트

app/layout.js 에서 두 폴더를 수용하도록 레이아웃 코드를 조정합니다.

전에:

 // ... (existing imports) export default function RootLayout({ children }) { return ( <html lang="en"> <body className={inter.className}>{children}</body> </html> ) }

후에:

 // ... (existing imports) export default function RootLayout({ children, folder1, folder2 }) { return ( <html lang="en"> <body className={inter.className}> <div> {folder1} </div> <div> {folder2} </div> {children} </body> </html> ); }

더 나은 가독성을 위해 레이아웃 스타일을 최대한 자유롭게 지정하세요.

5.5 로딩 상태 추가

Next.Js 문서에는 다음과 같이 명시되어 있습니다.

특별한 파일 loading.js React Suspense를 사용하여 의미 있는 Loading UI를 만드는 데 도움이 됩니다. 이 규칙을 사용하면 경로 세그먼트의 콘텐츠가 로드되는 동안 서버에서 즉시 로드 상태를 표시할 수 있습니다. 렌더링이 완료되면 새 콘텐츠가 자동으로 교체됩니다.

각 구성 요소(folder1 및 폴더2)에 대해 로드 상태를 생성합니다. 폴더 구조는 다음과 같아야 합니다.

 app |__ @folder1 |____ page.js |____ loading.js |__ @folder2 |____ page.js |____ loading.js |__ page.js |__ layout.js

앱/@folder1/loading.js

 export default function Loading() { return <p>LOADING FOLDER 1...</p> }

앱/@folder2/loading.js

 export default function Loading() { return <p>LOADING FOLDER 2...</p> }

5.6. 페이지 수정

app/page.js 의 내용을 조정합니다.

이 수정을 통해 메인 페이지에 아무것도 표시되지 않고 병렬 경로가 빛나게 됩니다.

 import Image from 'next/image' import styles from './page.module.css' export default function Home() { // anything you add here will be rendered as a children of RootLayout return null }