[Udemy Vue 완벽가이드 Section13] 180. 이름이 있는 라우트 및 위치 객체 더 알아보기

지금까지 중첩 라우트에 대해 배웠다.

좀 더 규모가 큰 Vue 애플리케이션을 떠올려봐라.

수십, 수백 개의 다양한 라우트와 다른 라우트 내부에 중첩된 라우트가 있는 애플리케이션.

중첩 라우트를 여러 레벨로 만들고 중첩 라우트에도 또 자식 라우트를 만들 수 있으니 이렇게 수많은 중첩 라우트가 있는 애플리케이션을 떠올려 봐라.

{
  path: '/teams',
  component: TeamsList,
  children: [{ path: ':teamId', component: TeamMembers, props: true, children: [] }],
  //children안에 또 children 있고..
},

 

그런 앱이 있다면 우리가 작업하는 것처럼 링크를 생성하는 게 복잡해진다.

항상 전체 경로를 추가해야하고, 이렇게 경로를 만들어 주어야 한다. 이동할 경로를 나타내는 긴 문자열을 만들어야 한다.

  computed: {
    teamMembersLink() {
      return '/teams/' + this.id;
    },
  },

 

이런 귀찮은 작업을 도와주기 위해 Vue라우터는 유용한 기능 두 가지를 제공한다.

router-link 요소에 링크를 쉽게 전달하도록 만드는 기능.

 

 

1/ to프로퍼티에 문자열 대신, 객체

첫 번째로 유용한 점은 바로 router-link 요소에 작성하는 to 프로퍼티가 문자열 링크만 다루지는 않는다는 것.

문자열 링크도 있지만, 그것만 쓸 수 있는 건 아니다.

 

경로를 다루는 문자열을 전달하는것 외에도 to프로퍼티의 값으로 객체를 사용할 수도 있다.

그러려면 당연히 to프로퍼티와 :을 동적으로 바인딩 해야한다.

이 객체에는 로드할 라우트를 표현하는 여러 옵션을 사용할 수 있는데 

이 객체에 path프로퍼티를 설정하고 '/teams/ + this.id와 같은 문자열을 작성한다.

  computed: {
    teamMembersLink() {
      return { path: '/teams' + this.id };
    },
  },

상단에서 문자열로 반환한 것과 같다. return '/teams' + this.id;

이렇게 작성하는 것만으론 특별히 대단할 건 없다.

객체 내부에 작성했을 뿐, 앞서 작성한 것과 똑같다.

 

 

Vue 라우터가 제공하는 또 다른 기능과 결합하면 더욱 유용해진다. 바로, 기명 라우트(named routes)이다.

우리가 작성한 모든 라우트에 이름을 할당할 수 있다.

 

 

2/ 기명 라우트(named routes)

라우트 구성에 name 프로퍼티만 추가하면 된다. 중첩 라우트의 이름은 team-members로 할 수 있다.

  routes: [
    { path: '/', redirect: '/teams' },
    {
      name: 'teams',
      path: '/teams',
      component: TeamsList,
      children: [{ name: 'team-members', path: ':teamId', component: TeamMembers, props: true }],
    },
    { path: '/users', component: UsersList },
    { path: '/:notFound(.*)', component: NotFound },
  ],

이름은 우리가 정하면 된다. 하지만 항상 '문자열'이어야 한다.

이렇게 teams, team-members 이름 두 개를 할당했다.

어느 라우트에든 이름을 할당할 수 있다.

 

이제 할당한 이름인 'team-members'를 활용해보자.

 

## name 프로퍼티

TeamItem.vue 컴포넌트로 가서 path프로퍼티를 설정해도 되지만 이 프로퍼티 대신 to에 전달할 라우트 위치 객체에 name프로퍼티를 설정하자.

teamMembersLink() {
 return { name: 'team-members', params: { teamId: this.id } };
}

이 router-link요소가 중첩 라우트를 로드하도록 나타낸 것.

이 라우트에 있는 동적 세그먼트(:teamId)도 객체에 설정해 주어야한다.

 

## params 프로퍼티

객체에 이동하고자 하는 목적지를 나타내는 두번째 프로퍼티를 추가해보자.

바로 params 프로퍼티.

params 프로퍼티는 객체를 취하며 key-value 쌍으로 입력할 수 있다.

물론 params에는 앞에 있는 name값을 가진 라우트를 넣어야 하니 이 경우에는 team-members 라우트의 teamId가 params 값이 된다. 그게 바로 동적 세그먼트(:)에 사용한 이름이므로.

따라서 params 프로퍼티에 전달하는 중첩 객체에 teamId를 추가하면 된다.

그리고 값으로는 this.id를 설정한다.

 

## named routes의 장점

이전보다 많은 코드를 작성한 건 분명하다.

하지만 여기에는 두 가지 장점이 있다.

가독성과 유지 관리에 매우 탁월하지만, 그 외에도 큰 장점이 하나 더 있다.

 

만약 다른 경로를 사용하기로 할 경우, 

예를 들어 '/teams' 대신, '/team'으로 바꾼다고 가정해보자.

그렇다면 이 TeamItem 컴포넌트로 이동해서 

return '/teams' + this.id; 를 return '/team' + this.id 이렇게 /teams로 작성한 모든 경로를 일일이 업데이트할 필요가 없다.

대신 name이 바뀌지 않으니 컴포넌트의 경로도 바꿀 필요가 없다. path값은 필요할 때마다 main.js에서 손쉽게 바꿀 수 있다.

이런 이유로 경로 대신 name으로 탐색한다.

 

특히 다양한 컴포넌트에서 라우트를 사용하는 규모가 큰 애플리케이션에서 유용한 패턴이 된다.

path를 바꿀 때마다 모든 컴포넌트를 업데이트할 필요가 없다.

그래서 to프로퍼티로 문자열보다 객체를 전달하는게 더 유용하다.

 

 

## 프로그래밍 방식

참고로 프로그래밍 방식으로 탐색해야 할 경우, this.$router.push()에도 같은 객체를 제공할 수 있다.

push 메서드에도 이와 같은 객체를 전달할 수 있지만 참고사항일 뿐이다.

this.$router.push({ name: 'team-members', params: { teamId: this.id }});

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.