특별한 파일인 layout.js, page.js 그리고 template.js를 사용하여 경로에 대한 UI를 생성할 수 있다. 해당 포스팅에서는 이러한 특별한 파일을 어떻게 사용하고 언제 사용해야 하는지 알아본다.

Pages

페이지는 경로에 고유한 UI입니다. 페이지는 page.js 파일에서 컴포넌트를 기본으로 내보내어 정의할 수 있다. 예를 들어, 인덱스 페이지를 만들려면 app 디렉토리 내에 page.js 파일을 추가한다.

// `app/page.tsx` is the UI for the `/` URL
export default function Page() {
  return <h1>Hello, Home page!</h1>
}

그런 다음, 추가 페이지를 만들려면 새 폴더를 생성하고 그 안에 page.js 파일을 추가한다. 예를 들어, /dashboard 경로에 대한 페이지를 만들려면 dashboard 라는 새 폴더를 생성하고 그 안에 page.js 파일을 추가한다.

// `app/dashboard/page.tsx` is the UI for the `/dashboard` URL
export default function Page() {
  return <h1>Hello, Dashboard Page!</h1>
}

<aside> 💡 page

• 페이지에는 .js, .jsx 또는 .tsx 파일 확장자를 사용할 수 있습니다.
• 페이지는 항상 경로 하위 트리의 말단에 위치합니다.
• 경로 세그먼트를 공개적으로 접근 가능하게 만들려면 page.js 파일이 필요합니다.
• 페이지는 기본적으로 서버 컴포넌트입니다. 그러나 클라이언트 컴포넌트로 설정할 수도 있습니다.
• 페이지는 데이터를 가져올 수 있습니다. (Data Fetching) </aside>

항해99 취업 리부트 코스를 수강하고 작성한 콘텐츠 입니다.

Routing: Pages and Layouts

항해99

#개발자포트폴리오 #개발자이력서 #개발자취업 #개발자취준 #코딩테스트 #항해99 #취리코 #취업리부트코스