[Udemy Vue 완벽가이드 Section16] 243. 코치 세부사항 컴포넌트 구축하기

CoachDetail.vue에 포함된 더미 컨텐츠를 실제 컨텐츠로 변경해보자.

 

CoachDetail.vue에서 id를 props로 가져와보자.

왜 id를 props로 가져올까?

→ 이 컴포넌트가 로드되는 방식을 생각해보자. 라우팅을 통해 로드된다.

CoachDetail.vue 컴포넌트는 '/coaches/:id' 경로를 통해 로드된다.

const router = createRouter({
  routes: [
    {
      path: '/coaches/:id',
      component: CoachDetail,
    },
  ],
});

 

따라서 이론적으로는 어떤 props도 가져오지 않는다.

컴포넌트를 로드하는 라우터는 기본적으로 어떤 props도 전달하지 않으므로.

 

하지만 라우트 구성에서 props를 true로 설정하면 해당 URL에 대한 동적 값을 확인하여 이 동적인 값을 해당 컴포넌트에 이 이름을 가진 props로 전달되게 할 수 있다.

여기서는 id로 지정했다.

따라서 props를 true로 설정하면, vue-router가 id에 저장된 값을 CoachDetail컴포넌트에 props로 전달한다.

const router = createRouter({
  routes: [
    {
      path: '/coaches/:id',
      component: CoachDetail,
      props: true,
    },
  ],
});

이 id를 사용해 Vuex 저장소에서 해당 코치의 데이터를 fetching할 수 있다.

 

created 생명주기 훅을 사용해서 이 컴포넌트를 생성할 때, Vuex에 접근해 이 id에 대한 데이터를 fetching해 selectedCoach와 같다고 설정할 예정.

  

 

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