반응형
Nuxt에서는 여러 컴포넌트 계층을 사용합니다.
이러한 컴포넌트 계층을 사용하면 사이트의 UI 개발을 좀 더 쉽고 빠르게 구현할 수 있습니다.
app.vue
기본적으로 진입점(entry point)입니다.
사이트의 모든 경로에 대한 컨텐츠를 렌더링 합니다.
기본 사용법
<template>
<h1>Hello World!</h1>
</template>
Page 디렉터리 사용할 때
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
Components
재사용 가능한 UI 컴포넌트들을 저장합니다. (ex, button, header...)
따로 명시적으로 import 없이 자동으로 가져올 수 있는 특징이 있습니다.
| components/
--| AppHeader.vue
--| AppFooter.vue
Pages
페이지 컴포넌트들을 표시합니다.
페이지 폴더 내에 있는 파일들을 각각 다른 경로를 나타냅니다.
app.vue 에서 <NuxtPage> 컴포넌트를 추가해서 페이지 라우팅을 사용할 수 있습니다.
| pages/
--| user
---- | index.vue
---- | [id].vue
--| index.vue
Dynamic Route (동적 경로)
[] 대괄호를 이용해서 사용합니다.
여러 개의 파라미터나, 비동적 텍스트들을 혼합하여 사용할 수 있습니다.
| pages/
--| user
---- | index.vue
---- | [id].vue
---- | admin-[id].vue
--| index.vue
Catch-All Rotue (포괄 경로)
대체 경로를 처리할 때, 유용합니다.
[...slug].vue 대괄호 내에 ... 점 세 개를 찍고 사용합니다.
| pages/
--| foo
---- | [...slug].vue
Nested Route (중첩 경로)
<NuxtPage> 컴포넌트와 함께 사용하여 중첩 페이지를 만들 수 있습니다.
-| pages/
---| [userId]/
------| reels.vue
------| saved.vue
---| [userId].vue
[userId].vue
<template>
<div>
<h1>UserId</h1>
<NuxtPage :userId="powerku" />
</div>
</template>
parent 컴포넌트에 NuxtPage를 추가하면 자식 페이지 컴포넌트를 중첩하여 페이지에 표시할 수 있습니다.
Layouts
여러 페이지의 헤더와 풋터와 같은 공통된 UI들이 있을 때, 해당 컴포넌트들을 포함합니다.
Page를 표시하기 위해서 Slot을 사용합니다.
<template>
<Header />
<div class="main">
<slot />
</div>
<Footer />
</template>728x90
반응형