[Vue.js] slot: 컴포넌트의 동적 콘텐츠 삽입 이해하기

 

1. 개요

Vue.js에서 slot은 컴포넌트 내부에 동적으로 콘텐츠를 삽입할 수 있는 강력한 기능입니다. 컴포넌트 개발자는 slot을 사용하여 사용자가 원하는 콘텐츠를 쉽게 추가하도록 허용할 수 있으며, 이는 다양한 상황에서 유용하게 활용될 수 있습니다.

이 블로그 게시글에서는 slot의 기본 개념부터 다양한 사용 예시까지, slot을 이해하고 사용하는 데 필요한 모든 것을 자세히 설명합니다.

2. slot의 기본 개념

slot은 컴포넌트 템플릿 내부에 정의되는 특수 영역입니다. 이 영역은 사용자가 삽입할 콘텐츠를 위한 공간 역할을 하며, 컴포넌트 개발자가 직접 정의한 콘텐츠와 동적으로 교체될 수 있습니다.

주요 특징:

• 동적 콘텐츠 삽입: 사용자는 컴포넌트를 사용할 때 slot에 원하는 콘텐츠를 직접 삽입할 수 있습니다.
• 재사용 가능성: 컴포넌트 개발자는 여러 컴포넌트에서 동일한 slot을 재사용하여 코드 중복을 줄일 수 있습니다.
• 유연성: 다양한 상황에 맞춰 콘텐츠를 동적으로 변경하고 조정할 수 있습니다.

3. slot 사용 예시

예제 1: 간단한 탭 컴포넌트

HTML

<template>
  <div class="tab-panel">
    <slot name="tab-header"></slot>
    <div class="content">
      <slot name="tab-content"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabPage',
};
</script>

<style scoped>
/* 스타일 정의 */
</style>

<TabPage>
  <slot name="tab-header">
    <ul class="tab-menu">
      <li>
        <a href="#">홈</a>
      </li>
      <li>
        <a href="#">프로필</a>
      </li>
      <li>
        <a href="#">설정</a>
      </li>
    </ul>
  </slot>

  <slot name="tab-content">
    <div class="tab-content">
      <p>홈 페이지입니다.</p>
    </div>
  </slot>
</TabPage>

 

설명:

• TabPage 컴포넌트는 tab-header와 tab-content이라는 두 개의 slot을 정의합니다.
• 사용자는 컴포넌트를 사용할 때 각 slot에 원하는 콘텐츠를 삽입합니다.
• tab-header 슬롯에는 탭 메뉴를 담은 ul 요소가 삽입됩니다.
• tab-content 슬롯에는 탭 본문을 담은 div 요소가 삽입됩니다.

예제 2: 동적 컴포넌트 렌더링

HTML

<template>
  <div class="card">
    <slot name="title"></slot>
    <div class="content">
      <slot name="body"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Card',
};
</script>

<style scoped>
/* 스타일 정의 */
</style>

<Card>
  <slot name="title">사용자 제목</slot>
  <slot name="body">
    <p>컴포넌트 내부에 동적으로 렌더링된 콘텐츠입니다.</p>
  </slot>
</Card>

 

설명:

• Card 컴포넌트는 title과 body라는 두 개의 slot을 정의합니다.
• title 슬롯