[Vue.js] 컴포넌트 심화3 - Slot

Slot

컴포넌트는 재활용이 가능하며, 여러 개의 컴포넌트를 자식 컴포넌트로 import 해서 사용할 수 있다는 것을 배웠다. 프로젝트를 진행하다 보면 어떤 화면의 경우는 굉장히 비슷한 UI와 기능을 가지고 있는데, 아주 일부만 다른 경우가 있다.

slot은 컴포넌트 내에서 다른 컴포넌트를 사용할 때 쓰는 컴포넌트의 마크업을 재정의하거나 확장하는 기능이다. => 컴포넌트의 재활용성을 높여주는 기능

일반적으로 팝업창은 header, main, footer로 이루어진다

<div class="container">
    <header>
    <!-- header 컨텐츠-->
    </header>
    <main>
    <!-- main 컨텐츠 -->
    </main>
    <footer>
    <!-- footer 컨텐츠 -->
    </footer>
</div>

좋은 애플리케이션은 단순한 팝업창일지라도 애플리케이션 내에서 사용되는 모든 팝업창의 디자인을 유형에 따라 동일하게 유지시킨다. 그래야 사용자에게 동일한 사용자 경험(UX)을 줄 수 있기 떄문이다.

여러 명의 개발자가 개발하다 보면 동일한 유형의 팝업창일지라도 디자인이 다르게 적용되는 경우가 종종 발생한다. 이렇게 개발자마다 디자인이 조금씩 다르다면 사용자의 입장에서는 일관성 없는 디자인으로 인해 좋지 않은 경험을 가질 수 있다.

Vue에서는 Slot을 이용해서 이런 부분을 해결할 수 있다. 팝업의 기본 틀에 해당하는 컴포넌트를 Slot을 이용해서 만들고, 개발자에게 제공하면 개발자는 팝업 디자인의 통일성을 유지시키면서 컨텐츠에 해당하는 부분만 작성하면 된다.

SlotModalLayout.vue

<template>
    <div class="modal-container">
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name = "footer"></slot>
        </footer>
    </div>
</template>

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

slot을 사용하는 컴포넌트에서는 삽입한 컴포넌트(여기서는 model-layout) 안에서 다음과 같이 template 태그를 사용해서 html 코드를 작성할 수 있다. 이때 v-slot:(slot이름) 디렉티브를 사용해서 동일한 이름의 slot 위치로 html 코드가 삽입된다. Name이 없는 slot은 v-slot:default로 지정하면 된다.

SlotUseModalLayout

<template>
    <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>
</template>
<script>
import ModalLayout from './SlotModalLayout.vue'

export default{ 
    components:{ModalLayout},
}
</script>

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

v-slot 대신 단추겅로 #를 사용할수도 있다.