🔍 Vue 3 시작
회사 업무에서 프론트엔드 프레임워크로 Vue 3를 사용하는데, 아직 한 번도 다뤄본 적이 없기에 공식문서를 통해 학습을 진행하고자 함!
📍 Vue ?
사용자 인터페이스 구축을 위한 JavaScript 프레임워크
표준 HTML, CSS 및 JavaScript를 기반으로 구축되며, 사용자 인터페이스를 효율적으로 개발할 수 있는 컴포넌트 기반 프로그래밍 모델을 제공함
import { createApp } from 'vue'
createApp({
data() {
return {
count: 0
}
}
}).mount('#app')
<div id="app">
<button @click="count++">
숫자 세기: {{ count }}
</button>
</div>
선언적 렌더링: Vue는 표준 HTML을 템플릿 문법으로 확장하여 JavaScript 상태(State)를 기반으로 화면에 출력될 HTML을 선언적으로 작성할 수 있음
반응성: Vue는 JavaScript 상태 변경을 추적하고, 변경이 발생하면 DOM을 효율적으로 업데이트하는 것을 자동으로 수행함
📍 싱글 파일 컴포넌트
HTML과 유사한 싱글 파일 컴포넌트(SFC) 파일 형식을 사용하여 Vue 컴포넌트를 작성함
Vue SFC(*.vue) = 컴포넌트의 논리(JavaScript), 템플릿(HTML), 스타일(CSS)을 하나의 파일에 캡슐화
<template>
...
</template>
<scrpit>
...
</scrpit>
<style>
...
</style>
추후 정리
SFC 문법 정리
📍 API 스타일
Vue 컴포넌트는 Options(옵션) API와 Composition(컴포지션) API 두 가지 스타일이 있음
(업무에서는 컴포지션 API 스타일을 사용한다고 하여 컴포지션 API 스타일만 간단히 정리함)
✅ Composition API
import
해서 가져온 API 함수들을 사용하여 컴포넌트의 로직을 정의함
SFC에서 Compostion API는 일반적으로 <script setup>
과 함께 사용됨
setup
속성은 Vue가
1. 더 적은 코드 문맥으로 컴포지션 API를 사용할 수 있게
2. 컴파일 시 의도한대로 올바르게 동작할 수 있게
코드를 변환하도록 하는 힌트!
<script setup>
에 import
되어 가져온 객체들과 선언된 최상위 변수 및 함수는 템플릿에서 직접 사용할 수 있음!
컴포지션 API는 함수 범위에서 직접 반응형 변수를 선언하고 복잡성을 처리하기 위해 여러 함수의 상태를 함께 구성하는데 중점을 둠!
Vue로 규모가 있는 앱의 전체를 구축하려고 하는 경우 사용을 권장함!
📒 참고 문서
'Front-end > Vue 3' 카테고리의 다른 글
[Vue 3] SFC 문법 (0) | 2023.05.10 |
---|