Vue 문법 : 싱글 파일 컴포넌트

Vue의 컴포넌트

Vue에서도 리액트와 마찬가지로 컴포넌트 개념이 있다.
구조 또한 유사한데, 컴포넌트들을 조합하여 하나의 앱이 만들어지는 트리 형태이다.

싱글 파일 컴포넌트(SFC)

Vue는 크게 두 가지 방식으로 컴포넌트 정의를 지원한다.

1. Vue 앱을 빌드하는 방식과,
2. 일반 JS 객체로 생성하는 방식이 있다. (Vue 프로젝트가 아닌 환경에 부분적으로 Vue를 삽입할 때 사용한다.)

첫 번째 방식에서 컴포넌트를 정의할 때 사용하는 Vue의 컴포넌트 정의 구조가 바로 싱글 파일 컴포넌트이다.
.vue 확장자를 사용하여 생성한다.

SFC의 구조

SFC는 크게 두 파트로 나뉘어있다.

• JS 로직을 작성하는 <script>
• HTML 엘리먼트를 정의하는 <template>
  ```html

``` <script> 파트에서는 자바스크립트 코드를 작성할 수 있다.
<template> 파트는 렌더링될 html 구문을 작성한다. 이 때 데이터 바인딩이나 디렉티브로 다양한 동적 제어를 할 수 있다.

부모 - 자식 컴포넌트

<script setup>을 사용할 경우 컴포넌트를 import해 템플릿에 사용할 수 있다.
이때 삽입된 컴포넌트가 자식 컴포넌트, 다른 컴포넌트를 포함하고 있는 컴포넌트가 부모 컴포넌트가 된다.

부모 컴포넌트는 데이터를 props로 전달할 수 있고, 자식 컴포넌트는 $emit 메서드로 이벤트를 전달할 수 있다.