HTML, SFC, Options, Composition - Vue.js

HTML, SFC

Vue 파일 형식

HTML

• HyperText Markup Language의 약자로, 웹 페이지의 구조를 정의하는 마크업 언어
• 주로 텍스트, 이미지, 링크, 버튼 등 웹 페이지의 콘텐츠와 구조를 기술하는 데 사용
• HTML은 단독으로 동작하지 않고 CSS, JavaScript와 함께 사용되어 시각적 스타일링 및 동적인 기능을 구현

<!--Options API-->
<script type="module">
import { createApp } from 'vue'

createApp({
  // 컴포넌트 옵션
    }
  }
}).mount('#app')
</script>

<div id="app">
  // ...
</div>

 

SFC (Single-File Components, 싱글 파일 컴포넌트)

• *.vue 파일
• 컴포넌트의 템플릿 로직 및 스타일을 하나의 파일로 묶어낸 특수한 파일 형식
• HTML(<template>), CSS(<style>), JavaScript(<script>) 를 합친 하나의 파일
• 하나의 파일에서 컴포넌트 뷰, 로직 및 스타일을 캡술화하고 배치함
• 컴포넌트의 관심사를 분리

<!--Options API-->
<script>
export default {
  // 컴포넌트 옵션
}
</script>

<template>
    //...
</template>

---

 

 

Options API, Composition API

Vue 컴포넌트 작성 스타일

Options API

• Option의 data, method, mounted 등의 객체를 사용해 컴포넌트 로직을 정의
• Option으로 정의된 속성은 컴포넌트 인스턴스의 this 로 접근 가능

<!--SFC-->
<script>
export default {
  // 컴포넌트 옵션
}
</script>

<template>
    // ...
</template>

 

Composition API

• 옵션 API는 각 컴포넌트에 인스턴스가 계속 존재하는 단점 개선을 위해 Composition API 가 등장
• import 해서 가져온 API 함수들을 사용해 컴포넌트의 로직을 정의
• SFC에서 Composition API는 <script setup> 과 함께 사용됨

<!--SFC-->
<script setup>
import { ref } from 'vue'
// 컴포넌트 로직
</script>

<template>
    // ...
</template>

 

Options API 🆚 Composition API

Options 와 Composition은 동일한 시스템에 의해 구동되는 다른 인터페이스

Options API는 Composition API 위에 구현됨

• Options API : 클래스 기반 모델과 잘 맞는 컴포넌트 인스턴스 개념을 중심으로 함
• Composition API : 함수 범위에서 직접 반응형 변수를 선언하고 복잡성 처리, 유연성 및 재사용성이 높은 프로그래밍 가능