컴포넌트 심화 학습 (Slot)

Slot

 - 컴포넌트 내에서 다른 컴포넌트를 사용할 때 쓰는 컴포넌트의 마크업을 재정의하거나 확장하는 기능

 - 컴포넌트의 재활용성을 높여주는 기능

 

Slot을 사용하여 Modal Popup 만들기

 - 팝업의 기본 틀에 해당하는 modal-layout 컴포넌트

// src/views/SlotModalLayout
<div>
  <header>
    <slot name="header"></slot>
  </header>
  
  <main>
    <slot></slot>
  </main>
  
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

 - 이렇게 Slot에 name을 지정해서 사용하는 Slot을 'Named Slots'라고 한다.

 - 컴포넌트는 정해진 html 구조를 갖게 된다. 이렇게 작성된 컴포넌트를 제공하고 개발자는 각 slot에 해당하는 코드만 작성하면 되기 때문에, 어떤 개발자가 구현하더라도 동일한 디자인의 팝업을 만들 수 있게 된다.

 

 - Slot을 사용하는 컴포넌트에서는 삽입한 컴포넌트 안에서 다음과 같이 template 태그를 사용하여 html 코드를 작성할 수 있다.

 - 이때 v-slot:slot명 디렉티브를 사용해서 동일한 이름의 slot 위치로 html 코드가 삽입된다.

 - Name이 없는 Slot은 v-slot:default로 지정하면 된다.

// src/views/SlotUseModalLayout.vue
<modal-layout>
  <template v-slot:header>
    <h1>팝업 타이틀</h1>
  </template>
  
  <template v-slot:default>
    <p>팝업 컨텐츠1</p>
    <p>팝업 컨텐츠2</p>
  </template>
  
  <template
    v-slot:footer>
    <button type="button" >닫기</button>
  </template>
</modal-layout>

 - 적용된 결과는 다음과 같다.

<div>
  <header>
    <h1>팝업 타이틀</h1>
  </header>
  
  <main>
    <p>팝업 컨텐츠1</p>
    <p>팝업 컨텐츠2</p>
  </main>
  
  <footer>
    <button type="button">닫기</button>
  </footer>
</div>

 - 컴포넌트 내에 여러 영역에 slot을 적용할 때는 name을 이용해서 적용하고, 하나의 영역에만 적용할 때는 굳이 slot에 name을 사용하지 않아도 된다.

 

 - 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 예제 코드

// PageTitle.vue
<template>
  <h2>{{ title }}</h2>
</template>
<script>
  export default {
    props: {
      title: {
        type: String,
        default: '기본 페이지 제목입니다.'
      }
    },
  }
</script>

 - 위 코드를 slot을 이용하면 다음과 같이 바뀌게 된다.

<template>
  <h2><slot></slot></h2>
</template>

<PageTitle>컴포넌트 사용 예제 페이지</PageTitle>

 

 - 단순히 페이지 타이틀을 만들기 위해서 props를 정의할 필요도 없고, 부모에서 자식 컴포넌트로 props 데이터를 전달할 필요도 없게 된다. 코드도 훨씬 간결하고 직관적으로 바뀌었다.

 

 - v-slot: 대신에 단축어로 #을 사용할 수 있다.

<modal-layout>
  <template #header>
    <h1>팝업 타이틀</h1>
  </template>
  
  <template #default>
    <p>팝업 컨텐츠1</p>
    <p>팝업 컨텐츠2</p>
  </template>
  
  <template #footer>
    <button type="button">닫기</button>
  </template>
</modal-layout>

 

프로젝트 개발 초기에 개발팀은 애플리케이션 전체에서 사용될 slot 기반의 컴포넌트를 구현해서 개발자에게 제공해야 합니다.
애플리케이션 개발 시 팝업, 페이지 타이틀 등 애플리케이션 전반에 걸쳐 다수의 컴포넌트에서 공통으로 사용해야 하는 공통 UI 요소가 있을 수 있습니다. 이런 UI 요소를 slot 기반의 컴포넌트로 만들어서 제공하면, 전체 애플리케이션 개발 생산성 및 통일된 디자인을 통한 사용자 경험을 향상 시킬 수 있습니다.
이러한 개발은 프로젝트 초기에 이루어져야 합니다. 한번 개발된 slot 기반의 컴포넌트는 다른 애플리케이션을 개발할 때도 사용할 수 있기 때문에 개발팀의 자산으로 지속적으로 관리되어야 합니다.