컴포넌트 생성과 사용

 컴포넌트는 Vue 애플리케이션을 구성하는 재사용 가능한 UI 요소입니다. 컴포넌트를 사용하면 코드를 모듈화하여 유지보수성을 향상시키고 개발 효율성을 높일 수 있습니다. Vue에서 컴포넌트를 생성하고 사용하는 방법을 알아봅시다.

1. 컴포넌트 생성

Vue 컴포넌트는 Vue.component 메서드를 사용하여 생성할 수 있습니다. 컴포넌트를 정의하는 객체에는 template, data, methods, computed 등의 옵션을 포함시킬 수 있습니다.

Vue.component('my-component', {
  template: '<div>나의 컴포넌트입니다.</div>',
  data() {
    return {
      message: '안녕하세요!'
    };
  },
  methods: {
    greet() {
      alert(this.message);
    }
  }
});

위의 코드에서 my-component는 컴포넌트의 이름이며, template 옵션은 컴포넌트의 HTML 템플릿을 정의합니다. data 옵션은 컴포넌트의 데이터를 정의하고, methods 옵션은 컴포넌트의 메서드를 정의합니다.

2. 컴포넌트 사용

컴포넌트를 사용하기 위해서는 컴포넌트를 태그처럼 사용해야 합니다. 컴포넌트를 사용하기 위해 <my-component>와 같이 태그를 작성하면 해당 컴포넌트가 렌더링됩니다.

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

위의 코드에서 <my-component> 태그를 사용하여 my-component 컴포넌트를 렌더링합니다. 컴포넌트의 내용은 컴포넌트 정의에서 지정한 template에 따라 표시됩니다.

3. 컴포넌트 통신

컴포넌트 간의 데이터 전달을 위해 부모-자식 관계를 활용할 수 있습니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하려면 props를 사용해야 합니다.

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

new Vue({
  el: '#app',
  data: {
    parentMessage: '부모로부터 전달된 메시지입니다.'
  }
});

위의 코드에서 child-component는 message라는 props를 가지며, 해당 값을 템플릿에서 사용할 수 있습니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하려면 v-bind 디렉티브를 사용해야 합니다.

<div id="app">
  <child-component v-bind:message="parentMessage"></child-component>
</div>

위의 코드에서 v-bind:message="parentMessage"는 parentMessage 데이터를 message 프롭스로 전달하는 예시입니다.

컴포넌트를 생성하고 사용하여 재사용 가능한 UI 요소를 만들 수 있습니다. 컴포넌트를 사용하면 코드의 가독성과 재사용성이 향상되며, Vue 애플리케이션 개발을 더욱 효율적으로 진행할 수 있습니다. 위의 내용을 기반으로 실습을 진행해보세요.