[Vue.js] - Vue 컴포넌트(components) 사용 방법

#Vue 컴포넌트(components)란?

Vue.js에서 컴포넌트(Component)란 재사용 가능한 코드 조각으로, 화면의 영역을 나누어 구성하거나 페이지를 구성하는 데 사용됩니다. 컴포넌트는 Vue.js 애플리케이션의 핵심 요소 중 하나로, Vue.js 애플리케이션을 구성하는 데 필수적입니다.

Vue.js에서 컴포넌트는 다른 컴포넌트와 결합하여 애플리케이션을 구성합니다. Vue.js의 컴포넌트는 다른 컴포넌트와 결합하여 더 큰 컴포넌트를 구성할 수 있습니다. 이를 통해 애플리케이션의 복잡도를 줄이고, 재사용성과 유지보수성을 향상시킬 수 있습니다.

Vue.js에서 컴포넌트는 Vue 인스턴스와 유사한 구조를 가지며, 데이터, 메서드, 계산된 속성, 라이프사이클 훅 등을 가질 수 있습니다. 또한 컴포넌트는 props와 events를 사용하여 상위 컴포넌트에서 데이터를 전달하고, 하위 컴포넌트에서 이벤트를 발생시키는 등의 통신을 할 수 있습니다.

Vue.js에서 컴포넌트는 .vue 파일에 정의되며, template, script, style 등의 영역으로 구성됩니다. 이를 통해 컴포넌트의 구조를 보다 명확하게 파악할 수 있으며, Vue.js 프로젝트의 구성과 유지보수를 용이하게 할 수 있습니다.

 

 

#Vue 컴포넌트 속성 종류

Vue 컴포넌트는 다양한 속성을 가지고 있으며, 이를 통해 컴포넌트의 동작을 제어하고 데이터를 전달할 수 있습니다. 주요한 Vue 컴포넌트 속성 종류는 다음과 같습니다:

- `data`: 컴포넌트의 데이터를 정의하는 속성입니다. 일반적으로 객체 형태로 선언되며, 컴포넌트 내에서 사용되는 변수들을 포함합니다.
- `props`: 상위 컴포넌트로부터 전달받은 속성(props)을 정의하는 속성입니다. 데이터 흐름을 위해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용됩니다.
- `computed`: 계산된 속성(computed property)을 정의하는 속성입니다. 기존 데이터를 기반으로 계산된 값을 반환하는 메서드와 유사한 역할을 합니다.
- `methods`: 컴포넌트에서 사용할 메서드를 정의하는 속성입니다. 주로 이벤트 핸들러나 비동기 동작을 수행하는 메서드를 선언합니다.
- `watch`: 데이터의 변경을 감시하고, 변경 시 특정 동작을 수행하는 속성입니다. 데이터의 변화를 감지하여 적절한 로직을 실행할 수 있습니다.
- `computed`, `methods`, `watch` 속성 외에도 컴포넌트에는 다양한 라이프사이클 훅(Lifecycle Hook)이 있습니다. 이전 질문에서 설명했던 라이프사이클 훅도 컴포넌트의 속성에 해당합니다.

이러한 속성을 조합하여 Vue 컴포넌트를 구성하고 원하는 동작을 구현할 수 있습니다.

 

-Vue 컴포넌트 생성

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // the registered name
  'MyComponent',
  // the implementation
  {
    /* ... */
  }
)

 

-Vue 컴포넌트 사용

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

 

 

#Vue 컴포넌트 라이프사이클 훅(vue lifecycle hooks)

Vue 컴포넌트는 라이프사이클 훅(Lifecycle Hook)이라는 특정 시점에서 실행되는 메서드를 가지고 있습니다. 이를 통해 컴포넌트의 생성, 갱신, 소멸 등의 단계에서 원하는 동작을 수행할 수 있습니다. 주요한 Vue 컴포넌트 라이프사이클 훅 종류와 간단한 설명은 다음과 같습니다:

- `beforeCreate`: 컴포넌트 인스턴스가 초기화되고 데이터 관찰 및 이벤트 초기화 전에 실행됩니다.
- `created`: 컴포넌트 인스턴스가 생성되고 데이터 관찰 및 이벤트 초기화가 완료된 후 실행됩니다. 하지만 DOM에는 마운트되지 않았습니다.
- `beforeMount`: 컴포넌트가 DOM에 마운트되기 전에 실행됩니다.
- `mounted`: 컴포넌트가 DOM에 마운트된 후 실행됩니다. 이 단계에서 컴포넌트는 DOM 요소에 접근할 수 있습니다.
- `beforeUpdate`: 컴포넌트가 재 렌더링되기 전에 실행됩니다. 데이터가 변경되었을 때 실행되는 단계입니다.
- `updated`: 컴포넌트가 재 렌더링된 후 실행됩니다. 이 단계에서 변경된 데이터를 사용하여 DOM에 대한 업데이트를 수행할 수 있습니다.
- `beforeUnmount`: 컴포넌트가 해제되기 전에 실행됩니다.
- `unmounted`: 컴포넌트가 해제된 후 실행됩니다. 이 단계에서 컴포넌트의 이벤트 리스너나 참조를 정리할 수 있습니다.

이러한 라이프사이클 훅을 사용하여 컴포넌트의 초기화, 데이터 갱신, DOM 조작 등을 관리할 수 있습니다.