4차 강의 노트 (앱라우터)

App Router 기본 페이지 라우팅

Next.js의 앱 라우터(App Router)에서는 페이지를 정의할 때 반드시 page.tsx 파일을 사용합니다. 기존의 index.tsx 같은 파일은 사용하지 않습니다.

• app/search/page.tsx
• app/book/[id]/page.tsx (동적 라우트)
• app/book/[...id]/page.tsx (Catch-all 라우트)
• app/book/[[...id]]/page.tsx (Optional Catch-all 라우트)

searchParams와 비구조화 할당

export default async function Page({
    searchParams
}: {
    searchParams: Promise<{ q: string }>
}) {
    // ...
}

{ searchParams }가 중괄호에 있는 이유

이 코드는 JavaScript의 비구조화 할당(Destructuring Assignment) 문법을 사용한 것입니다. Next.js는 Page 컴포넌트에 여러 속성이 담긴 props 객체를 전달하는데, 그중에서 searchParams라는 속성만 콕 집어 변수로 사용하기 위해 이 문법을 사용합니다. 이렇게 하면 props.searchParams처럼 길게 쓰지 않고 바로 searchParams로 접근할 수 있어 코드가 간결해집니다.

Promise<{q: string}>의 의미

searchParams의 타입에 사용된 Promise<>는 타입스크립트의 제네릭(Generics) 문법입니다.

• Promise: searchParams가 비동기적인 값이라는 것을 나타냅니다. Next.js 14.1부터 서버 컴포넌트는 쿼리 파라미터를 Promise로 받아서 렌더링 성능을 최적화합니다.
• <와 >: 제네릭 문법으로, 이 Promise가 최종적으로 { q: string } 형태의 객체를 반환할 것이라고 명시하는 역할을 합니다. 즉, 이 Promise가 약속하는 최종 값의 타입을 알려줍니다.

---

레이아웃 설정하기

레이아웃 파일의 이름은 layout.tsx로 명시합니다. 레이아웃 컴포넌트는 children prop을 받아 하위 페이지(page.tsx)를 감싸는 역할을 합니다.

• layout.tsx 파일이 있는 폴더에는 반드시 해당 레이아웃을 사용할 page.tsx 파일이 함께 있어야 합니다.

// app/search/setting/layout.tsx
import { ReactNode } from "react";

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <div>
      <div>세팅 헤더</div>
      {children}
    </div>
  );
}

레이아웃 중첩(Nesting)

레이아웃은 폴더 구조에 따라 자동으로 중첩됩니다.

• app/search/layout.tsx
• app/search/setting/layout.tsx
• app/search/setting/page.tsx 위와 같은 구조일 때, http://localhost:3000/search/setting 경로에 접속하면 부모 레이아웃부터 차례대로 중첩되어 화면에 나타납니다.

라우트 그룹

라우트 그룹은 URL 경로에 영향을 주지 않고, 폴더를 묶는 용도로 사용합니다. 폴더 이름을 소괄호 ()로 감싸서 생성합니다.

• 예시: (with-searchbar)/search/page.tsx
• 주요 사용 목적: 특정 라우트에만 별도의 레이아웃을 적용하고 싶을 때 사용합니다. 예를 들어, 메인 페이지와 검색 페이지에만 특정 레이아웃을 공유하고 싶을 때 라우트 그룹을 활용할 수 있습니다.

이 링크를 통해 구매하시면 제가 수익을 받을 수 있어요. 🤗

https://inf.run/4oB9v