[Vue 3] Vue 시작하기

🔍 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로 규모가 있는 앱의 전체를 구축하려고 하는 경우 사용을 권장함!

---

📒 참고 문서

공식문서