[Vue.js] 컴포넌트란?

컴포넌트 정의하기

빌드 방식을 사용할 떄 일반적으로 싱글 파일 컴포넌트 (SFC)라고 하는 .vue 확장자를 사용하는 전용 파일에 각 Vue 컴포넌트를 정의 한다.

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">당신은 {{ count }} 번 클릭했습니다.</button>
</template>

빌드 방식을 사용하지 않을 때 Vue 컴포넌트는 Vue 관련 옵션을 포함하는 일반 JavaScript 객체로 정의할 수 있다.

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `
    <button @click="count++">
      당신은 {{ count }} 번 클릭했습니다.
    </button>`
  // 또는 `template: '#my-template-element'`
}

위에 형식은 옵션 api 형식의 방식이다.

JavaScript 문자열로 정의한 템플릿은 Vue가 즉석에서 컴파일 하고 엘리먼트<template>를 가르키는 ID 셀렉터를 사용할 수도 있다. Vue는 해당 컨텐츠를 템플릿 소스로 사용한다.

자식 컴포넌트를 사용하려며 부모 컴포넌트에서 가져와야 합니다. 파일 안에 ButtonCounter.vue 라는 카운터 컴포넌트를 배치했다고 가정하면, 해당 컴포넌트 파일의 기본 내보내기가 노출된다.

<script setup>
import ButtonCounter from './ButtonCounter.vue'
</script>

<template>
  <h1>아래에 자식 컴포넌트가 있습니다.</h1>
  <ButtonCounter />
</template>

<script setup>을 사용하면 가져온 컴포넌트를 템플릿에서 자동으로 사용할 수 있다.

컴포넌트를 전역으로 등록하면 improt 없이 지정된 앱의 모든 곳에서 컴포넌트를 사용할 수 있다.
전역으로 등록하면 편리하지만 몇가지 단점이 있다.

1. 전역등록은 빌드 시스템이 사용하지 않는 컴포넌트를 제거하는 것(tree-shaking)을 방지 합니다. 컴포넌트를 전역으로 등록했지만 결국 앱의 어느 곳에서도 사용하지 않으면 최종 번들에 계속 포함됨

2. 전역등록은 대규모 앱에서 의존관계를 덜 명확하게 한다. 자식 컴포넌트를 사용하는 부모 컴포넌트에서 자식 컴포넌트의 구현을 찾기가 어렵다. 이것은 너무 많은 전역변수를 사용하는 것과 유사 하기에 장기적인 유지 관리 측면에 영향을 줄 수 있다.

로컬등록은 등록된 컴포넌트의 가용성 범위를 현재 컴포넌트로만 제한한다. 의존관계를 더 명시적으로 하고 트리 쉐이킹에 더 친숙하다!