[Udemy Vue 완벽가이드 Section13] 173. 라우트 매개변수를 사용하여 데이터 전달하기(동적 세그먼트)

다양한 형태의 내비게이션을 추가해보았다.

이번엔 라우트 구성에서 무엇을 더 할 수 있을지 알아보자.

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/teams', component: TeamsList },
    { path: '/users', component: UsersList },
  ],
  linkActiveClass: 'active',
});

여러 앱에 필요한 기능 중, 특히 중요한게 하나 있다.

 

TeamMembers 컴포넌트가 있다.

해당 컴포넌트에서 선택한 팀에 따라 다른 멤버를 렌더링하려고 한다.

이건 현재는 사용하고있지 않은 더미 컴포넌트이다.

내장 더미 데이터를 가진 컴포넌트로, 어디에서도 렌더링하지않고 있다.

지금 하려는 건 앱에서 일반적으로 흔히 볼 수 있는 용례이다.

 

'/teams'로 향하는 또다른 라우트가 있지만, '/teams'가 끝이 아니다. (해당 경로는 이미 있으므로.)

path별로 라우트는 하나만 있어야한다.

대신 '/teams'뒤에 '/동적id'를 오게 할 거다.

 

팀 아이디가 t1이면 '/teams/t1'같은 경로를 지원하겠다는 뜻.

그리고 팀마다 각기 다른 데이터를 같은 컴포넌트로 로드할거다.

소위 라우트 매개변수가 있는 동적 라우트가 필요하다.

Vue라우터가 이 기능을 지원한다.

 

# 동적경로 라우트 설정

- 방법 : 콜론(:)과 어떤 이름을 추가하면 동적 경로 세그먼트가 정의된다.

 

이번에는 teamId라고 해보자.

즉, /teams 뒤에 /무언가를 입력하면 이 라우트가 활성화된다는 이야기이다.

 

## 동적경로 라우트 설정 시, 주의할 점

- 순서가 중요하다.

여기 '/teams/new'라는 다른 라우트가 있다고 해보자. 이건 동적 세그먼트가 아니라 단순한 new 문자이다.

그럼 new가 먼저 와야한다. 그렇지 않으면 이 동적 세그먼트 라우트가 new도 match 될 수도 있다. new도 teamId 중 하나라고 인식하게 될 수도 있다.

  routes: [
    { path: '/teams/:teamId' },
    { path: '/teams/new' },
  ]

▼

  routes: [
    { path: '/teams/new'},
    { path: '/teams/:teamId' },
  ]

지금은 new 라우트는 쓰지 않을 거다. 그냥 이런 경우가 있을 수 있다라는 예시를 보여준 것.

어떻게 다른 라우트가 파싱되고 우선순위가 지정되는지 알아두자.

 

 

동적 라우트 매개변수를 사용하는 동적 라우트를 설정해보자.

로드해야할 컴포넌트는 TeamMembers 컴포넌트이다.

  routes: [
    { path: '/teams/:teamId', component: TeamMembers },
  ]

이렇게 하고 저장 후 teams/t1으로 이동하면 TeamMembers 컴포넌트가 로드된다.

'teams/'뒤에 그 어떤걸 적어도 로드된다. teams/뒤에 뭐가 오든 같은 컴포넌트가 로드된다.

:teamId이 동적 세그먼트 값이라고 해석되기 때문. 

 

같은 더미 데이터를 표시하는 같은 컴포넌트일테지만 이제 변경도 할 수 있다.

라우트 매개변수(여기서는 teamId)에 사용된 구체적인 값에 액세스 할거다.

로드할 컴포넌트, 즉 TeamMembers 내부에 있는 사용자가 입력한 구체적인 값에 액세스할 수 있다는 이야기.

 

TeamMembers.vue에 있는 더미 team 데이터는 사용하지 않을거다.

대신 App.vue에 있는 전체 team 데이터를 사용할거다.

App.vue에 보면 teams도 있고, users도 있다.

그리고 team마다 member 목록도 있다.

  data() {
    return {
      teams: [
        { id: 't1', name: 'Frontend Engineers', members: ['u1', 'u2'] },
        { id: 't2', name: 'Backend Engineers', members: ['u1', 'u2', 'u3'] },
        { id: 't3', name: 'Client Consulting', members: ['u4', 'u5'] },
      ],
      users: [
        { id: 'u1', fullName: 'Max Schwarz', role: 'Engineer' },
        { id: 'u2', fullName: 'Praveen Kumar', role: 'Engineer' },
        { id: 'u3', fullName: 'Julie Jones', role: 'Engineer' },
        { id: 'u4', fullName: 'Alex Blackfield', role: 'Consultant' },
        { id: 'u5', fullName: 'Marie Smith', role: 'Consultant' },
      ],
    };
  },

 

세개의 team들의 id 중 하나가 URL의 /teams/뒤에 라우트 매개변수 값으로 입력됐을 때, 해당 팀을 로드하고 해당 팀에 어떤 멤버가 있는지 검색해서 users 중, 알맞은 사용자를 로드하는 것.

 

 

teams와 users는 이미 App.vue에서 provide하고 있다.

둘다 TeamMembers에 inject해서 데이터에 액세스할 수 있게 해야한다.

inject: ['teams', 'users'],

 

 

이제 사용자가 입력한 동적 세그먼트에 액세스해주기만 하면 된다. 라우트 매개변수로 입력한 구체적인 값.

거기엔 created 생명주기 훅을 쓰면된다.

컴포넌트 생성 시, 모든 data가 사용 가능 상태이며, 화면에 표시되기 전 호출된다.

그러면 created를 통해 주입된 데이터 뿐만 아니라 라우팅 데이터에도 액세스할 수 있다.

이를 위해 사용할 수 있는 특별한 프로퍼티가 있다. 

 

 

전체 라우터에 액세스하게 해주는 $router가 있고, 또 $route가 있다. 맨 끝에 r이 빠진다.

이 컴포넌트가 router를 통해 로드되었기 때문에 route를 사용할 수 있다.

 

그리고 route는 다양한 정보에 액세스하게 해준다. 

예를 들어, 페이지의 로드에 해당하는 경로 → this.$route.path. ex: '/teams/t1' 

이 this.$route.path로부터 teamId를 parse할 수 있지만 여기서는 그럴 필요는 없다.

다른 프로퍼티를 쓰면 된다. → 바로 'params' 프로퍼티.

(*노트: console.log(this.$route)로 내장객체 내 모든 것을 확인할 수 있다.)

params는 페이지 로드에 사용된 모든 라우트 매개변수를 가지고 있다.

 

  routes: [
    { path: '/teams/:teamId', component: TeamMembers },
  ]

이 경우에는 이 페이지에 하나의 라우트 매개변수가 있다.

여기서 콜론(:)으로 시작하는 모든걸 라우트 매개변수라고 한다.

여기서 선택한 이름이 사용자가 제공한 값을 추출할 수 있는 이름이 된다. (여기서는 teamId)

 

TeamMembers.vue에서 params.teamId에 액세스할 수 있다.

created() {
 // this.$route.path // /teams/t1
 this.$route.params.teamId //t1
}

만약 라우팅 설정에서 콜론(:)뒤에 다른 이름을 썼다면 teamId 대신 그 이름을 써주면 된다.

이렇게 teamId를 가져왔으니, 이걸 추가 상수에 저장하자.

그리고 inject된 teams배열에서 teamId를 가지고 올바른 팀을 찾는다.

const selectedTeam = this.teams.find(team => team.id === teamId)

 

물론, 존재하지 않는 id를 입력하는 경우도 있을텐데 일단 그 부분은 무시하고 진행하자.

 

팀을 찾았으니 이제 팀 소속 멤버를 찾아보자.

selectedTeam.members에 액세스해 members를 얻자.

created() {
  const teamId = this.$route.params.teamId;
  const selectedTeam = this.teams.find(team => team.id === teamId);
  const members = selectedTeam.members; // ['u1', 'u2']
  const selectedMembers = [];
  for(const member of members) {
   const selectedUser = this.users.find(user => user.id === member);
   selectedMembers.push(selectedUser);
  }
  this.members = selectedMembers;
  this.teamName = selectedTeam.name;
}

 

템플릿에 팀이름과 멤버 데이터 프로퍼티가 필요하다. 그래서 데이터 프로퍼티에 둘다 추가하자.

data(){
 return {
   teamName: '',
   members: [],
 }
},

 

그리고 created로 가서, 데이터 프로퍼티 this.members가 selectedMembers가 되고,

this.teamName은 selectedTeam과 같다고 설정하고 .name으로 액세스하게 해준다.

 

저장하고 새로고침 시, /teams/t1, /teams/t2, /teams/t3 각자 다른 멤버들이 뜬다.

 

잘 작동한다.

이제 URL을 직접 입력하는것 말고 Teams페이지에 있는 'View Members' 버튼을 클릭해서 이동하게 만들어보자.

 

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