Vue 3는 Composition API를 도입하여 더 유연하고 재사용 가능한 코드 작성을 가능하게 했습니다. 기존 Options API와 달리 로직을 기능별로 구성할 수 있어 대규모 애플리케이션에서 특히 유용합니다.
Vue 3 introduced the Composition API to enable more flexible and reusable code. Unlike the Options API, it allows organizing logic by feature, which is especially useful for large applications.
ref와 reactive ref and reactive
Vue 3의 반응성 시스템의 핵심입니다. ref는 기본 타입에, reactive는 객체에 사용합니다.
The core of Vue 3's reactivity system. Use ref for primitives and reactive
for objects.
// ref - 기본 타입에 사용
const count = ref(0)
count.value++ // .value로 접근
// reactive - 객체에 사용
const state = reactive({
user: null,
loading: false
})
state.loading = true // 직접 접근
// ref - for primitive types
const count = ref(0)
count.value++ // access via .value
// reactive - for objects
const state = reactive({
user: null,
loading: false
})
state.loading = true // direct access
computed와 watch computed and watch
computed는 의존성이 변경될 때만 재계산되는 값을 만들고,
watch는 반응형 데이터의 변화를 감지합니다.
computed creates values that only recalculate when dependencies change,
while watch observes changes in reactive data.
const price = ref(100)
const quantity = ref(2)
// computed: 자동으로 재계산
const total = computed(() => price.value * quantity.value)
// watch: 변화 감지
watch(price, (newVal, oldVal) => {
console.log(`가격 변경: ${oldVal} → ${newVal}`)
})
const price = ref(100)
const quantity = ref(2)
// computed: auto-recalculates
const total = computed(() => price.value * quantity.value)
// watch: detects changes
watch(price, (newVal, oldVal) => {
console.log(`Price changed: ${oldVal} → ${newVal}`)
})
script setup script setup
Vue 3.2에서 도입된 <script setup>은 Composition API를 더 간결하게 사용할 수 있게 합니다.
<script setup>, introduced in Vue 3.2, allows using the Composition API more
concisely.
import { ref } from 'vue'
const message = ref('Hello Vue 3!')
function greet() {
alert(message.value)
}
</script>
<template>
<button @click="greet">{{ message }}</button>
</template>
import { ref } from 'vue'
const message = ref('Hello Vue 3!')
function greet() {
alert(message.value)
}
</script>
<template>
<button @click="greet">{{ message }}</button>
</template>
Props와 Emit Props and Emit
const props = defineProps({
title: { type: String, required: true },
count: { type: Number, default: 0 }
})
const emit = defineEmits(['update', 'delete'])
function handleClick() {
emit('update', { id: 1 })
}
</script>
const props = defineProps({
title: { type: String, required: true },
count: { type: Number, default: 0 }
})
const emit = defineEmits(['update', 'delete'])
function handleClick() {
emit('update', { id: 1 })
}
</script>
💡 Vue 3 타자 연습의 장점 💡 Benefits of Vue 3 Typing Practice
Composition API의 패턴을 손에 익히면 더 빠르게 컴포넌트를 작성할 수 있습니다.
특히 ref, computed, watch 같은 핵심 함수들을 반복 연습하세요.
Internalizing Composition API patterns helps you write components faster.
Practice core functions like ref, computed, and watch
repeatedly.