[javascript] Vue.js의 템플릿 상속과 믹스인 기능 활용법

01 Dec 2023

javascript

Vue.js는 강력한 기능을 제공하여 웹 애플리케이션을 개발할 수 있게 해줍니다. 그 중에서도 템플릿 상속과 믹스인 기능은 코드 재사용과 유지보수에 매우 유용한 기능입니다.

템플릿 상속

템플릿 상속은 Vue 컴포넌트의 재사용을 편리하게 해주는 기능입니다. 기본 템플릿을 정의하고 이를 확장하여 다른 컴포넌트를 만들 수 있습니다.

// ParentComponent.vue
<template>
  <div>
    <h1>{{ title }}</h1>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ParentComponent',
  data() {
    return {
      title: '부모 컴포넌트'
    }
  }
}
</script>

// ChildComponent.vue
<template>
  <ParentComponent>
    <h2>자식 컴포넌트</h2>
  </ParentComponent>
</template>

위 예제에서 ParentComponent는 title 데이터와 slot을 가지고 있는 부모 컴포넌트이고, ChildComponent는 ParentComponent를 확장한 자식 컴포넌트입니다. slot은 부모 컴포넌트에서 자식 컴포넌트로 컨텐츠를 전달하는 역할을 합니다.

믹스인

믹스인은 여러 컴포넌트에서 공통으로 사용하는 로직을 재사용할 수 있게 해주는 기능입니다. 일반적으로 믹스인은 컴포넌트 간에 공유할 메서드, 데이터, 라이프사이클 훅 등을 정의하는데 사용됩니다.

// mixin.js
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

// ComponentA.vue
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">증가</button>
  </div>
</template>

<script>
import mixin from './mixin'

export default {
  mixins: [mixin],
  name: 'ComponentA'
}
</script>

// ComponentB.vue
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">증가</button>
  </div>
</template>

<script>
import mixin from './mixin'

export default {
  mixins: [mixin],
  name: 'ComponentB'
}
</script>

위 예제에서 mixin은 count 데이터와 increment 메서드를 가지고 있는 믹스인입니다. ComponentA와 ComponentB 컴포넌트에서 mixins 속성을 사용하여 믹스인을 적용할 수 있습니다. 이렇게 하면 믹스인에 정의한 로직을 여러 컴포넌트에서 공유하여 사용할 수 있습니다.

결론

Vue.js의 템플릿 상속과 믹스인 기능은 코드의 재사용성을 높이고 유지보수를 용이하게 해주는 강력한 기능입니다. 템플릿 상속을 통해 컴포넌트를 확장하고, 믹스인을 통해 여러 컴포넌트에서 공통으로 사용하는 로직을 재사용할 수 있습니다.

더 자세한 내용은 Vue.js 공식 문서를 참고하세요.