💻Component

• 컴포넌트를 정의하는 방법은 Single-File Component(SFC)를 사용하는 방법과 문자열 템플릿(String template)으로 정의하는 방법이 있다.
  
  
  

1. Single-File Component(SFC)

빌드 도구를 사용할 때 컴포넌트는 일반적으로 Single-File Component(SFC)로 정의할 수 있다. SFC는 확장 *.vue를 가진 단일 파일이다.

<template>
</template>

<script>
</script>

<style></style>

이렇게 template, script, style로 나눠져 있다.

1-1. 컴포넌트 등록

• Vue 컴포넌트는 <template>안에서 발견 되었을 때 Vue가 구현 위치를 알 수 있도록 등록해야합니다. 그리고 컴포넌트를 등록하는 방법은 전역(Global) 및 지역(Local) 두 가지가 있다.

1) 전역 등록

• 우리는 app.componet()메서드를 사용하여 현재 Vue 애플리케이션에서 전역적으로 사용할 수 있도록 할 수 있다.

2) 지역 등록

• 전역 등록은 편리하지만 다음과 같은 몇가지 단점이 있다.

1. webpack(또는 Vite)과 같은 빌드 시스템을 사용하는 경우 컴포넌트를 전역 등록하는 것은 컴포넌트를 사용하지 않더라도 계속해서 최종 빌드에 해당 컴포넌트가 포함되는 것을 의미한다. 이는 사용자가 다운로드하는 자바스크립트 파일의 크기를 불필요하게 증가시킨다.

2. 전역 등록을 계속 하게 되면 애플리케이션의 컴포넌트간 종속 관계를 확인하기 힘듭니다. 상위 컴포넌트, 하위 컴포넌트 구분이 힘들면 유지보수를 하기에 매우 어려워지게 된다.
   

2. 문자열 템플릿(String Template)

빌드 도구를 사용하지 않을 때 컴포넌트는 Vue 옵션인을 포함하는 일반 JavaScript 객체로 정의할 수 있다.