컴포넌트 생성 및 사용

Vue.js 컴포넌트 생성 및 사용: 상세 가이드

소개

Vue.js의 강력한 기능 중 하나인 컴포넌트는 독립적인 코드 재사용 단위입니다. 컴포넌트를 효과적으로 사용하면 복잡한 UI를 작은 조각으로 나누어 관리하고 재사용할 수 있어 개발 효율성을 높이고 코드 유지보수를 용이하게 합니다. 이 글에서는 Vue.js 컴포넌트 생성부터 사용 방법까지 상세하게 다루어, 여러분이 Vue.js 개발에 능숙해지는 데 도움을 드리고자 합니다.

컴포넌트 생성

Vue.js에서 컴포넌트를 생성하는 방법은 크게 두 가지가 있습니다.

1. Single File Component (SFC):

• 장점: 템플릿, 스크립트, 스타일을 하나의 .vue 파일에서 관리하여 가독성이 좋고, 컴포넌트 간의 의존성 관리가 편리합니다.
• 구조:

  <template>
    </template>
  
  <script>
  export default {
    // 컴포넌트 로직
  }
  </script>
  
  <style>
  /* 스타일 영역 */
  </style>
  

   

728x90

2. JavaScript 객체:

• 장점: 다른 JavaScript 객체와의 통합이 쉽고, 간단한 컴포넌트를 빠르게 생성할 수 있습니다.
• 예시:

  const MyComponent = {
    template: '<div>Hello, world!</div>'
  }
  

   

컴포넌트 등록

생성한 컴포넌트를 사용하려면 Vue 인스턴스에 등록해야 합니다.

1. 전역 등록:

• Vue.component() 메서드를 사용하여 모든 Vue 인스턴스에서 사용 가능하도록 등록합니다.
• 예시:

  Vue.component('my-component', MyComponent)
  

   

2. 로컬 등록:

• 특정 Vue 인스턴스 내에서만 사용하도록 등록합니다.
• 예시:

  new Vue({
    el: '#app',
    components: {
      MyComponent
    }
  })
  

   

컴포넌트 사용

등록된 컴포넌트는 HTML 템플릿에서 custom tag 형태로 사용할 수 있습니다.

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

 

컴포넌트의 속성과 메서드

• props: 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용됩니다.
• data: 컴포넌트 내부 데이터를 관리합니다.
• methods: 컴포넌트 내부에서 사용할 메서드를 정의합니다.
• computed: 계산된 속성을 정의하여 데이터를 가공합니다.
• watch: 데이터 변화를 감지하고 특정 작업을 수행합니다.
• lifecycle hooks: 컴포넌트의 생성, 업데이트, 삭제 등 각 단계에서 실행되는 함수입니다.

예시:

<template>
  <div>
    <p>현재 카운트: {{ count }}</p>
    <button @click="increment">증가</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

 

슬롯 (Slots)

부모 컴포넌트에서 자식 컴포넌트의 내용을 커스터마이징할 수 있는 기능입니다.

<my-component>
  <p>슬롯 내용</p>
</my-component>

<template>
  <div>
    <slot></slot>
  </div>
</template>

 

컴포넌트 간 통신

• props: 부모에서 자식으로 데이터 전달
• events: 자식에서 부모로 이벤트 발생
• Vuex: 전역 상태 관리
• provide/inject: 조상 컴포넌트에서 후손 컴포넌트로 데이터 전달

컴포넌트 스타일링

• scoped 스타일: 컴포넌트 내부 스타일만 적용
• CSS Modules: 스타일 클래스명 충돌 방지
• CSS Preprocessors: Sass, Less 등을 사용하여 스타일 관리

컴포넌트 재사용

• Mixins: 여러 컴포넌트에서 공통적으로 사용하는 기능을 모듈화
• Custom directives: 특정 기능을 구현하기 위한 지시어 생성

결론

Vue.js 컴포넌트는 복잡한 UI를 효율적으로 관리하고 재사용성을 높이는 데 필수적인 기능입니다. 이 글에서 다룬 내용을 바탕으로 여러분만의 Vue.js 애플리케이션을 개발해 보세요.