컴포넌트 기초 | Vue.js

컴포넌트를 사용하면 UI를 독립적으로 재사용 가능한 일부분으로 분할하고, 각 부분을 개별적으로 다룰 수 있다.

→ 따라서, 앱이 중첩된 컴포넌트의 트리로 구성되는 것은 일반적이다.

• Vue는 각 컴포넌트에 사용자 정의 컨텐츠와 논리를 캡슐화할 수 있는 자체 컴포넌트 모델을 구현한다!

컴포넌트 정의하기

→ 빌드 방식을 사용할 때 일반적으로 싱글 파일 컴포넌트(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'`
}

→ JavaScript 문자열로 정의한 템플릿은 Vue가 즉석에서 컴파일한다.

• 엘리먼트를 가리키는 ID 셀렉터를 사용할 수도 있다.
  • Vue는 해당 컨텐츠를 템플릿 소스로 사용한다.