[Vue.js] 컴포넌트 재 사용성을 늘리기 위한 slot 활용하기

이번 포스트에서는 컴포넌트 재 사용성을 늘리기 위한 slot을 활용하는 방법에 대해서 다뤄보겠습니다.

 

slot은 언제 사용할까?

slot은 컴포넌트를 재사용성을 높이고 싶을 때 사용한다. 즉, 재사용을 한다는 말은 다른 컴포넌트들 보다 디테일하기 때문이다. 디테일하기 때문에 재사용성을 높일 수 있는 것이다.

예를 들어 1번 컴포넌트는 다양한 곳에 사용된다고 한다. 하지만 매번 다른 문구들을 출력해야 할 때 이번장에서 다루는 slot태그를 활용하면 쉽게 재사용할 수 있는 컴포넌트를 만드는 것이다.

 

Basic

• 프로젝트이름/src/components/Slot.vue

<template>
  <h1>
    <slot></slot>
  </h1>
</template>

<script>
export default {};
</script>

<style></style>

• 프로젝트이름/src/App.vue

<template>
  <Slot>Vue.js</Slot>
</template>

<script>
import Slot from './components/Slot';

export default {
  name: 'App',
  components: {
    Slot,
  },
};
</script>

<style></style>

기본적으로 부모 컴포넌트를 열린 태그와 닫힌태그를 같이 사용할 때 그 안에 문구를 넣어주면 그 값이 자식 컴포넌트 slot 태그에 들어가게 된다.

• <Slot>Vue.js</Slot>의 Vue.js 문구가 <h1><slot> -- </slot></h1>의 -- 자리에 들어가게 되는 것이다.

이때 그러면 생각날수도 있는 것이 부모 컴포넌트에 아무 문구도 작성하지 않는 default(기본값)을 지정할 수 있냐? 라고 한다면 당연히 가능합니다.

그 방법은 <slot></slot> 태그안에 문구를 작성해 주는 것입니다.

<!-- Slot.vue -->
<template>
  <h1>
    <slot>JavaScript</slot>
  </h1>
</template>

<!-- App.vue -->
<template>
  <Slot></Slot>
  <Slot />
</template>

이것을 Vue에서는 Fallback Contents라고 부릅니다.

Fallback Contents는 간단하게 default 값을 지정해주는 거라고 생각하면 편합니다.

 

Named Slot(이름을 갖는 Slot)

Named Slot은 컴포넌트안에 여러가지에 태그를 넣을 수 있습니다. 하지만 a, b, c 태그가 있다고 가정할 때 이 태그들의 순서를 매번 외워서 작성할 수는 없습니다. 이를 해결해주기 위해 우리는 Named Slot을 사용합니다.

<!-- Slot -->
<template>
  <h1>
    <slot name="icon"></slot>
    <slot name="title">JavaScript</slot>
  </h1>
</template>

<!-- App.vue -->
<template>
  <Slot>
    <template v-slot:icon>
      <span>(JS)</span>
    </template>
    <template #title>
      <span>Vue.js</span>
    </template>
  </Slot>
  <Slot>
    <template #title>
      <span>React</span>
    </template>
    <template v-slot:icon>
      <span>(R)</span>
    </template>
  </Slot>
</template>

v-slot:의 약어는 사용하여 #입니다.

위 코드를 보시면 Vue.js와 React는 서로 위치가 다릅니다. Vue.js는 icon 뒤에 React는 icon 앞에 위치해 있습니다. 하지만 출력한 화면을 보시면 똑같이 icon title 순서가 맞춰져서 나오는 것을 알 수 있습니다. 이는 자식 컴포넌트에서 작성할 때 순서를 이미 정해두었기 때문입니다. 이처럼 slot을 여러개 사용할 때 먼저 순서를 정해두었다면 부모 컴포넌트에서 무조건 순서를 맞출 필요는 없는 것입니다.(협업 개발이라면 순서를 맞추는 것이 수정과 유지보수에서 편할 것 같습니다 ㅎㅎ)