[vue3-router] 03. nested route와 named view

이번 포스트에서는 중첩 경로와 이름 있는 뷰에 대해 살펴보자.

 

중첩 경로(nested route)

 

중첩 경로란?

중첩 경로란 상위 컴포넌트에 하위 컴포넌트를 포함하는 구조를 의미한다.

페이지를 구성하다 보면 상위 요소가 선택되어야 의미가 있는 하위 요소들이 있다. 예를 들어 특정 사용자의 프로필을 본다든가, 그 사람이 작성한 글을 보는 상황을 생각해 보자. 이 페이지들은 [사용자 선택]이 없다면 아무 의미가 없는 행동들이다. 이런 경우 상위 컴포넌트에 하위 컴포넌트를 포함시키는 중첩 경로 즉 nested route를 구성할 수 있다.

 

Router 작성

중첩 경로를 작성하기 위해서는 상위 경로에 children이라는 속성을 이용해서 중첩 경로 정보를 작성해주면 된다. children은 []로 여러 개의 중첩 컴포넌트에 대한 route를 작성할 수 있다. 이때 중첩 컴포넌트의 path는 [상위 path] + '/' + [중첩 path]로 구성되기 때문에 중첩 컴포넌트의 path를 구성할 때 '/'를 삽입하지 않는다.

{
    // 상위 컴포넌트에 대한 route 정보
    path: '/user/:id',
    name: 'user',
    component: UserView,
    // 중첩 컴포넌트에 대한 route 정보
    children: [
      {
          path: 'profile', // /user/:id/profile에 매핑, /로 시작 하지 않음
          component: ProfileView,
          name: 'user_profile'
      },
      {
          path: 'post',
          component: PostView,
          name: 'user_post'
      }
    ]
}

 

<template>영역

언제나처럼 Root 컴포넌트(App)는 상위 컴포넌트(UserComp)를 위한 RouterView를 갖는다. 이 Root 컴포넌트의 RouterView에는 중첩 컴포넌트는 표시되지 않는다.

<script setup>
import { ref } from 'vue'
const user = ref('hong')
</script>

<template>
  <header>
    <div class="wrapper">
      <h1>nested route</h1>
      <nav>
        <RouterLink to="/">기본</RouterLink> |
        <RouterLink :to="'/user/' + user">사용자: {{ user }}</RouterLink> |
        <RouterLink :to="'/user/' + user + '/profile'">사용자 프로필</RouterLink> |
        <RouterLink :to="{ name: 'user_post', params: { id: user } }">사용자 글</RouterLink> |
      </nav>
    </div>
  </header>
  <RouterView />
</template>

두 번째 RouterLink는  path 기반으로 /user/[id]/profile 경로에 매핑된 component를 호출한다. 하지만 이렇게 경로를 만들다 보면 경로가 쉽게 파악하기 어려울 수 있다. 이럴 때 세 번째 RouterLink처럼 객체를 이용해서 name 기반의 호출을 이용하면 간단히 처리할 수 있다.

 

다음은 중첩 컴포넌트(UserProfile, UserPost)를 포함하는 상위 컴포넌트(UserComp)이다. 상위 컴포넌트는 중첩 컴포넌트를 표시할 RouterView를 갖는다.

<template>
    <h2>개별 사용자를 위한 페이지({{ route.params.id }})</h2>
    <ul>
      <li><RouterLink :to="'/user/'+route.params.id+'/profile'">profile</RouterLink></li>
    </ul>

    <!-- 이 RouterView는 UserView의 자식 component들이 보여지는 곳: 전체와 무관-->
  <RouterView/>
</template>

<script setup>
import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const moveTo = (name)=>{
    router.push({name, params:{id: route.params.id}})
}
</script>

 

nested component의 상태

개발자 도구를 이용해서 nested component의 구성 상태를 확인해 보자.

 

 

이름 있는 View(named view)

 

named view

지금까지의 router는 하나의 RouterView에 하나의 component들을 교체하는 방식으로 구성되었다. 

만약 특정 링크로 이동 시 표현되어야 할 컴포넌트가 여러 개면 어떨까? 예를 들어 어떤 쇼핑몰에 갔더니 상품소개 컴포넌트와 함께 상품 후기, 상품 주문 등이 한꺼번에 있는 경우도 자주 보게 된다. 또한 대부분의 페이지는 header, content, footer로 구분된다.

 

이처럼 레이아웃을 구성해야 하는 경우 RouterView에 이름을 부여하고 특정 이름의 RouterView에 특정 컴포넌트를 배치할 수 있는데 이것이 named view이다. 이때 이름을 지정하지 않은 RouterView는 기본 값으로 default라는 이름을 갖는다.

<template>
  <header>
    <RouterLink to="/named/home">Home</RouterLink> 
  </header>

  <RouterView name="header" class="header" />
  <RouterView /> <!-- == RouterView name="default"-->
  <RouterView name="footer" />
</template>

 

router 작성

named view의 목적은 "한 화면에 여러 개의 컴포넌트를 보이겠다"는 것이다. 따라서 기존에 route 정보를 구성할 때 속성이 path와 component였다면 named view가 사용되는 경우는 path 하나에 여러 개의 component 즉 components를 사용한다.

{
  path:"/named/home",
  components:{
    header: HeaderView,
    footer: FooterView,
    default:SiteMainView,
  }
},

 

이제 /name/home을 요청하면 아래와 같이 3개의 컴포넌트가 매칭된 것을 확인할 수 있다.