Vue 3 소개와 Composition API의 혁신
과거 Vue 2는 Options API라는 방식을 사용했습니다. 이는 배우기 쉽다는 장점이 있었지만, 앱이 커지면 연관된 코드가 data, methods, computed 등 여러 곳에 흩어져 유지보수가 힘든 단점이 있었습니다. Vue 3의 Composition API (<script setup>)는 기능 단위로 코드를 한데 모을 수 있는 혁명적인 패러다임입니다.
<script setup>의 마법
- 코드의 극적인 간소화: 귀찮은
export default { setup() { ... return {} } }껍데기가 몽땅 사라졌습니다. 변수나 함수를 선언하기만 하면 템플릿에서 즉시 사용 가능합니다. - React Hooks와 유사한 구조: 상태 선언, 이벤트 처리 로직이 위에서 아래로 물 흐르듯 자연스럽게 작성되어 가독성이 폭발적으로 상승합니다.
- 타입스크립트(TS) 완벽 호환: Vue 2의 최대 단점이었던 조악한 TS 지원이 해결되었고, 네이티브 수준의 완벽한 타입 추론을 제공합니다.
<!-- ==========================================
// 📂 App.vue (Vue 3 Composition API 예제)
// ========================================== -->
<script setup>
// 이 안에 선언된 모든 변수와 함수는 템플릿(<template>)에서 즉시 사용 가능합니다!
// 귀찮게 return {} 을 적어줄 필요가 1도 없습니다.
import { ref } from 'vue';
// [1. 상태(State) 선언]
// ref()를 사용하여 변수를 반응형으로 만듭니다. (값이 바뀌면 화면도 자동으로 바뀜)
const count = ref(0);
// [2. 함수(Method) 선언]
// 그냥 평범한 자바스크립트 함수를 만들면 됩니다.
const increment = () => {
// script 안에서 ref 값을 변경할 때는 반드시 '.value'를 붙여야 합니다!
count.value += 1;
};
</script>
<template>
<div class="p-8 max-w-md mx-auto text-center border rounded-xl shadow-lg mt-10">
<h1 class="text-3xl font-bold mb-6 text-gray-800">Vue 3 시작하기 🚀</h1>
<!-- 템플릿(HTML) 영역에서는 .value 없이 변수 이름만 쓰면 됩니다! (Vue가 알아서 까줌) -->
<p class="text-6xl font-black text-emerald-500 mb-8">{{ count }}</p>
<!-- 버튼 클릭 이벤트는 @click (또는 v-on:click) 으로 연결합니다. -->
<button
@click="increment"
class="px-8 py-3 bg-emerald-500 text-white rounded-full font-bold hover:bg-emerald-600 transition"
>
카운트 증가!
</button>
</div>
</template>