Vue.js의 컴포넌트와 Props

Vue.js는 컴포넌트 기반의 프레임워크로, 

애플리케이션을 작은 단위의 컴포넌트로 나누어 개발할 수 있도록 돕습니다.

이러한 컴포넌트는 재사용 가능하고, 독립적으로 관리할 수 있어 유지보수와 확장성이 뛰어납니다.

이번 글에서는 Vue.js의 컴포넌트 시스템과 Props, 그리고 슬롯(Slot) 개념에 대해 자세히 알아보겠습니다.

 

컴포넌트란? 

컴포넌트는 Vue.js 애플리케이션의 기본 빌딩 블록입니다. 

각 컴포넌트는 HTML, CSS, JavaScript를 포함하여 특정 기능이나 UI를 담당합니다. 

컴포넌트를 사용하면 복잡한 애플리케이션을 더 작은 단위로 나누어 관리할 수 있으며, 

각 컴포넌트는 독립적으로 개발 및 테스트가 가능합니다.

- 컴포넌트 생성 방법

Vue.js에서 컴포넌트를 생성하는 방법은 여러 가지가 있지만, 가장 일반적인 방법은 Vue.extend() 메서드를 사용하는 것입니다. 

// Vue 인스턴스 생성
const CounterComponent = Vue.extend({
  data() {
    return {
      count: 0
    };
  },
  template: `
    <div>
      <p>Count: {{ count }}</p>
      <button @click="increment">Increment</button>
    </div>
  `,
  methods: {
    increment() {
      this.count++;
    }
  }
});

// 컴포넌트를 전역적으로 등록
Vue.component('counter', CounterComponent);

// Vue 인스턴스 생성 및 마운트
new Vue({
  el: '#app',
  template: `
    <div>
      <h1>Counter Example</h1>
      <counter></counter>
    </div>
  `
});

→ Vue.extend()를 사용하여 CounterComponent라는 컴포넌트를 정의하고, Vue.component()를 사용하여 이 컴포넌트를 전역적으로 등록합니다. 

이후, Vue 인스턴스를 생성할 때 counter 컴포넌트를 템플릿에서 사용할 수 있습니다.

이렇게 하면, CounterComponent를 여러 곳에서 재사용할 수 있게 됩니다.

 

- Composition API

import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const name = ref('Vue.js');
    return { name };
  },
  template: '<div>Hello, {{ name }}!</div>'
});

 

 

Props의 사용법

Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다. 

Props를 사용하면 컴포넌트 간의 데이터 흐름을 관리할 수 있으며, 재사용성을 높일 수 있습니다. 

Props는 자식 컴포넌트에서 props 옵션을 통해 정의할 수 있습니다.

// 부모 컴포넌트
Vue.component('parent-component', {
  template: '<child-component :message="greeting"></child-component>',
  data() {
    return {
      greeting: 'Hello from Parent!'
    };
  }
});

// 자식 컴포넌트
Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
});

→  parent-component는 greeting이라는 데이터를 child-component에 message라는 Props로 전달합니다. 

자식 컴포넌트는 이 Props를 사용하여 부모로부터 받은 메시지를 출력합니다.

슬롯(Slot)

슬롯은 컴포넌트의 템플릿 내에서 부모 컴포넌트의 콘텐츠를 삽입할 수 있는 기능입니다. 

슬롯을 사용하면 컴포넌트를 더욱 유연하게 만들 수 있으며, 다양한 콘텐츠를 동적으로 삽입할 수 있습니다.

Vue.component('my-slot-component', {
  template: `
    <div>
      <h1>My Slot Component</h1>
      <slot></slot>
    </div>
  `
});

// 사용 예
<my-slot-component>
  <p>This is some content passed to the slot!</p>
</my-slot-component>

→   my-slot-component는 <slot></slot>을 사용하여 부모 컴포넌트에서 전달된 콘텐츠를 삽입합니다. 

부모 컴포넌트에서 <my-slot-component>를 사용할 때, 슬롯에 콘텐츠를 전달하면 해당 콘텐츠가 컴포넌트 내에 삽입됩니다.

 

마무리

Vue.js의 컴포넌트 시스템과 Props, 슬롯은 애플리케이션을 구조화하고 데이터 흐름을 관리하는 데 중요한 역할을 합니다. 

컴포넌트를 사용하여 애플리케이션을 작은 단위로 나누고, Props를 통해 데이터를 전달하며, 슬롯을 활용하여 유연한 콘텐츠 삽입이 가능합니다. 

이러한 개념들을 잘 이해하고 활용하면, Vue.js로 더욱 효율적이고 유지보수하기 쉬운 애플리케이션을 개발할 수 있습니다.