[Vue.js] Vue.js 컴포넌트

Vue.js에서 컴포넌트는 재사용 가능하고 독립적인 UI 조각입니다. 컴포넌트 기반 아키텍처는 애플리케이션을 작은 부분으로 나누어 각 부분을 개별적으로 관리하고, 이를 조합하여 복잡한 UI를 구성할 수 있게 해줍니다. Vue에서 컴포넌트를 만들고 사용하는 방법을 알아보겠습니다.

---

컴포넌트 생성

Vue 컴포넌트는 Vue.component 메서드를 사용하여 생성합니다.

Vue.component('my-component', {
  template: '<div>This is my custom component.</div>',
});

위의 코드에서 Vue.component를 사용하여 my-component라는 컴포넌트를 정의하고 있습니다. template 속성은 컴포넌트의 HTML 템플릿을 정의합니다.

---

컴포넌트 사용

Vue 컴포넌트를 사용하기 위해서는 Vue 인스턴스 내에서 컴포넌트를 등록해야 합니다.

<div id="app">
  <my-component></my-component>
</div>

var app = new Vue({
  el: '#app',
});

위의 코드에서 my-component라는 컴포넌트를 el: '#app'에 등록하여 사용하고 있습니다.

---

컴포넌트 통신

컴포넌트 간에 데이터를 전달하기 위해 props를 사용할 수 있습니다.

Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>',
});

위의 코드에서 child-component는 message라는 props를 사용하여 데이터를 받아와서 템플릿에 출력합니다.

<div id="app">
  <child-component message="Hello from parent"></child-component>
</div>

var app = new Vue({
  el: '#app',
});

위의 코드에서 child-component에 message props를 전달하여 데이터를 컴포넌트에 전달하고 있습니다.

---

컴포넌트 라이프사이클

Vue 컴포넌트는 라이프사이클 훅을 제공하여 컴포넌트의 생명주기를 관리할 수 있습니다.

Vue.component('lifecycle-component', {
  template: '<div>This is a lifecycle component.</div>',
  created: function() {
    console.log('Component created');
  },
  mounted: function() {
    console.log('Component mounted');
  },
  beforeDestroy: function() {
    console.log('Component beforeDestroy');
  }
});

위의 코드에서 created, mounted, beforeDestroy 등의 라이프사이클 훅을 사용하여 컴포넌트의 각 라이프사이클 단계에서 원하는 작업을 수행할 수 있습니다.

---

Vue 컴포넌트는 재사용 가능하고 독립적인 UI 조각으로, Vue.component를 사용하여 컴포넌트를 생성하고, props를 통해 컴포넌트 간에 데이터를 전달할 수 있습니다. 컴포넌트 라이프사이클 훅을 활용하여 컴포넌트의 생명주기를 관리할 수 있습니다. Vue 컴포넌트를 활용하여 유연하고 재사용 가능한 UI를 구성해보세요!