From 250470a8bd47fb7ab42c05c71c29eb32154974d1 Mon Sep 17 00:00:00 2001 From: jinlee0310 Date: Tue, 6 Aug 2024 18:42:05 +0900 Subject: [PATCH] =?UTF-8?q?[#111]=20docs:=20pages-and-layouts=20=EB=B2=88?= =?UTF-8?q?=EC=97=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../routing/pages-and-layouts.mdx | 42 +++++++++---------- 1 file changed, 20 insertions(+), 22 deletions(-) diff --git a/pages/docs/pages/building-your-application/routing/pages-and-layouts.mdx b/pages/docs/pages/building-your-application/routing/pages-and-layouts.mdx index 587fbb4..638bcb2 100644 --- a/pages/docs/pages/building-your-application/routing/pages-and-layouts.mdx +++ b/pages/docs/pages/building-your-application/routing/pages-and-layouts.mdx @@ -3,17 +3,15 @@ title: Pages and Layouts description: Create your first page and shared layout with the Pages Router. --- -{/* TODO: 번역이 필요합니다. */} - # Pages and Layouts -The Pages Router has a file-system based router built on the concept of pages. +페이지 라우터는 페이지 개념에 기반한 파일 시스템 기반 라우터를 가지고 있습니다. -When a file is added to the `pages` directory, it's automatically available as a route. +`pages` 디렉토리에 파일을 추가하면 자동으로 라우트로 사용 가능해집니다. -In Next.js, a **page** is a [React Component](https://react.dev/learn/your-first-component) exported from a `.js`, `.jsx`, `.ts`, or `.tsx` file in the `pages` directory. Each page is associated with a route based on its file name. +Next.js에서 **페이지**는 `pages` 디렉토리의 `.js`, `.jsx`, `.ts`, 또는 `.tsx` 파일에서 내보내진 [React 컴포넌트](https://react.dev/learn/your-first-component)입니다. 각 페이지는 파일 이름을 기반으로 한 라우트와 연결됩니다. -**Example**: If you create `pages/about.js` that exports a React component like below, it will be accessible at `/about`. +**예시**: 아래와 같이 React 컴포넌트를 내보내는 `pages/about.js`를 생성하면, `/about`에서 접근할 수 있습니다. ```jsx export default function About() { @@ -23,27 +21,27 @@ export default function About() { ## Index routes -The router will automatically route files named `index` to the root of the directory. +라우터는 `index`라는 이름의 파일을 디렉토리의 루트로 자동 라우팅합니다. - `pages/index.js` → `/` - `pages/blog/index.js` → `/blog` ## Nested routes -The router supports nested files. If you create a nested folder structure, files will automatically be routed in the same way still. +라우터는 중첩 파일을 지원합니다. 중첩 폴더 구조를 생성하면 파일들이 여전히 같은 방식으로 자동 라우팅됩니다. - `pages/blog/first-post.js` → `/blog/first-post` - `pages/dashboard/settings/username.js` → `/dashboard/settings/username` ## Pages with Dynamic Routes -Next.js supports pages with dynamic routes. For example, if you create a file called `pages/posts/[id].js`, then it will be accessible at `posts/1`, `posts/2`, etc. +Next.js는 동적 라우트를 가진 페이지를 지원합니다. 예를 들어, `pages/posts/[id].js`라는 파일을 생성하면, `posts/1`, `posts/2` 등에서 접근할 수 있습니다. -> To learn more about dynamic routing, check the [Dynamic Routing documentation](/docs/pages/building-your-application/routing/dynamic-routes). +> 동적 라우팅에 대해 더 알아보려면 [동적 라우팅 문서](/docs/pages/building-your-application/routing/dynamic-routes)를 확인하세요. ## Layout Pattern -The React model allows us to deconstruct a [page](/docs/pages/building-your-application/routing/pages-and-layouts) into a series of components. Many of these components are often reused between pages. For example, you might have the same navigation bar and footer on every page. +React 모델을 사용하면 [페이지](/docs/pages/building-your-application/routing/pages-and-layouts)를 여러 컴포넌트로 분해할 수 있습니다. 이 컴포넌트들은 종종 페이지 간에 재사용됩니다. 예를 들어, 모든 페이지에 같은 네비게이션 바와 푸터를 가질 수 있습니다. ```jsx filename="components/layout.js" import Navbar from './navbar' @@ -64,7 +62,7 @@ export default function Layout({ children }) { ### Single Shared Layout with Custom App -If you only have one layout for your entire application, you can create a [Custom App](/docs/pages/building-your-application/routing/custom-app) and wrap your application with the layout. Since the `` component is re-used when changing pages, its component state will be preserved (e.g. input values). +전체 애플리케이션에 하나의 레이아웃만 있는 경우, [커스텀 앱](/docs/pages/building-your-application/routing/custom-app)을 생성하고 애플리케이션을 레이아웃으로 감쌀 수 있습니다. 페이지 변경 시 `` 컴포넌트가 재사용되므로 컴포넌트 상태가 유지됩니다(예: input values). ```jsx filename="pages/_app.js" import Layout from '../components/layout' @@ -80,7 +78,7 @@ export default function MyApp({ Component, pageProps }) { ### Per-Page Layouts -If you need multiple layouts, you can add a property `getLayout` to your page, allowing you to return a React component for the layout. This allows you to define the layout on a _per-page basis_. Since we're returning a function, we can have complex nested layouts if desired. +여러 레이아웃이 필요한 경우, 페이지에 `getLayout` 속성을 추가하여 레이아웃을 반환할 수 있는 React 컴포넌트를 지정할 수 있습니다. 이를 통해 페이지별로 레이아웃을 정의할 수 있습니다. 함수를 반환하므로 원하는 경우 복잡한 중첩 레이아웃을 가질 수 있습니다. ```jsx filename="pages/index.js" @@ -89,7 +87,7 @@ import NestedLayout from '../components/nested-layout' export default function Page() { return ( - /** Your content */ + /** 여기에 내용을 넣으세요 */ ) } @@ -104,22 +102,22 @@ Page.getLayout = function getLayout(page) { ```jsx filename="pages/_app.js" export default function MyApp({ Component, pageProps }) { - // Use the layout defined at the page level, if available + // 가능하다면, 페이지 수준에서 정의된 레이아웃을 사용하세요 const getLayout = Component.getLayout ?? ((page) => page) return getLayout() } ``` -When navigating between pages, we want to _persist_ page state (input values, scroll position, etc.) for a Single-Page Application (SPA) experience. +페이지 간에 이동할 때, 단일 페이지 애플리케이션(SPA) 경험을 위해 페이지 상태(입력 값, 스크롤 위치 등)를 유지 하고자 합니다. -This layout pattern enables state persistence because the React component tree is maintained between page transitions. With the component tree, React can understand which elements have changed to preserve state. +이 레이아웃 패턴은 페이지 전환 사이에 React 컴포넌트 트리가 유지되므로 상태 유지를 가능하게 합니다. 컴포넌트 트리를 통해 React는 어떤 요소가 변경되었는지 파악하여 상태를 보존할 수 있습니다. -> **Good to know**: This process is called [reconciliation](https://react.dev/learn/preserving-and-resetting-state), which is how React understands which elements have changed. +> **알아두면 좋습니다**: 이 과정을 [재조정](https://react.dev/learn/preserving-and-resetting-state)이라고 하며, React가 어떤 요소가 변경되었는지 이해하는 방법입니다. ### With TypeScript -When using TypeScript, you must first create a new type for your pages which includes a `getLayout` function. Then, you must create a new type for your `AppProps` which overrides the `Component` property to use the previously created type. +타입스크립트를 사용할 때는 먼저 `getLayout` 함수를 포함하는 페이지의 새 타입을 생성해야 합니다. 그런 다음, 이전에 생성된 타입을 사용하도록 `Component` 속성을 오버라이드하는 `AppProps`의 새 타입을 생성해야 합니다. ```tsx filename="pages/index.tsx" switcher import type { ReactElement } from 'react' @@ -175,7 +173,7 @@ type AppPropsWithLayout = AppProps & { } export default function MyApp({ Component, pageProps }: AppPropsWithLayout) { - // Use the layout defined at the page level, if available + // 가능하다면, 페이지 수준에서 정의된 레이아웃을 사용하세요 const getLayout = Component.getLayout ?? ((page) => page) return getLayout() @@ -184,7 +182,7 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) { ```jsx filename="pages/_app.js" switcher export default function MyApp({ Component, pageProps }) { - // Use the layout defined at the page level, if available + // 가능하다면, 페이지 수준에서 정의된 레이아웃을 사용하세요 const getLayout = Component.getLayout ?? ((page) => page) return getLayout() @@ -193,7 +191,7 @@ export default function MyApp({ Component, pageProps }) { ### Data Fetching -Inside your layout, you can fetch data on the client-side using `useEffect` or a library like [SWR](https://swr.vercel.app/). Because this file is not a [Page](/docs/pages/building-your-application/routing/pages-and-layouts), you cannot use `getStaticProps` or `getServerSideProps` currently. +레이아웃 내에서 `useEffect` 또는 [SWR](https://swr.vercel.app/) 같은 라이브러리를 사용하여 클라이언트 측에서 데이터를 가져올 수 있습니다. 이 파일이 [페이지](/docs/pages/building-your-application/routing/pages-and-layouts)가 아니기 때문에 현재 `getStaticProps`나 `getServerSideProps`는 사용할 수 없습니다. ```jsx filename="components/layout.js" import useSWR from 'swr'