Vue - RouterLink v-slot, custom 속성

인프런 짐코딩 강의를 듣고 정리한 글입니다.

아래 두 가지 코드가 어떻게 다른지 정리가 필요하여 공부해 보겠습니다.

<RouterLink :to="`/course/${courseSlug}`">
  <CourseCard
    :title="title"
    :subtitle="subtitle"
    :thumbnail="thumbnail"
  />
</RouterLink>

<RouterLink v-slot="{ navigate }" custom :to="`/course/${courseSlug}`">
  <CourseCard
    :title="title"
    :subtitle="subtitle"
    :thumbnail="thumbnail"
    @click="navigate"
  />
</RouterLink>

---

첫 번째 코드

<RouterLink :to="`/course/${courseSlug}`">
  <CourseCard
    :title="title"
    :subtitle="subtitle"
    :thumbnail="thumbnail"
  />
</RouterLink>

기본 RouterLink 사용 방식입니다. 이 코드에서 RouterLink는 기본적으로 HTML의 a 태그처럼 작동합니다. RouterLink 내부에 있는 컴포넌트, 즉 CourseCard 컴포넌트를 클릭하면 자동으로 RouterLink의 to 속성에 정의된 경로로 이동합니다.
렌더링된 HTML 구조는 아래와 같습니다.

<a href="/course/course-slug">
  <div class="course-card">
    <img src="thumbnail.jpg" alt="Course Thumbnail">
    <h2>Course Title</h2>
    <p>Course Subtitle</p>
  </div>
</a>

---

두 번째 코드

<RouterLink v-slot="{ navigate }" custom :to="`/course/${courseSlug}`">
  <CourseCard
    :title="title"
    :subtitle="subtitle"
    :thumbnail="thumbnail"
    @click="navigate"
  />
</RouterLink>

이 코드는 기본 RouterLink 사용 방식과는 다르게 v-slot과 custom 속성을 사용하여 더 유연하게 페이지 전환을 처리합니다.
렌더링된 HTML 구조는 아래와 같습니다.

<div class="course-card" role="button" tabindex="0">
  <img src="thumbnail.jpg" alt="Course Thumbnail">
  <h2>Course Title</h2>
  <p>Course Subtitle</p>
</div>

이 경우 RouterLink는 직접적으로 어떤 태그도 렌더링하지 않습니다. 대신, v-slot을 통해 전달된 navigate 함수가 @click 이벤트에 연결된 상태로 CourseCard가 렌더링됩니다. 이 때문에 HTML에서 a 태그가 없고, CourseCard 컴포넌트가 페이지 이동을 처리하게 됩니다.

---

주요 차이점

• 첫 번째 코드는 RouterLink가 a 태그로 렌더링되어, CourseCard가 그 안에 포함됩니다. 이 때문에 CourseCard를 클릭하면 기본적으로 앵커 링크처럼 동작하여 페이지가 이동됩니다.
• 두 번째 코드는 custom 속성을 사용하여 RouterLink가 직접적인 HTML 태그를 렌더링하지 않습니다. 대신, CourseCard 자체가 페이지 이동을 제어하며, 그 안의 클릭 이벤트를 처리하게 됩니다.