Vue 3 소개

Vue 3는 Vue 2와의 하위 호환성을 유지하면서 새로운 기능과 개선된 성능을 제공합니다. 주요 변경 사항 중 하나는 Composition API입니다. 이 새로운 접근 방식은 코드를 더 직관적이고 재사용 가능하게 만듭니다.

옵션형 API vs 조합형 API

Vue 3에서는 기존의 옵션형 API 외에도 조합형 API를 지원합니다. 조합형 API는 비슷한 로직을 그룹화하여 관리하기 쉽게 만들어줍니다.

// 옵션형 API 예시
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

// 조합형 API 예시
import { ref } from 'vue';
const counter = ref(0);
function increaseCounter() {
  counter.value++;
}

빠른 시작

조합형 API 체험

<template>
  <p>{{ counter }}</p>
  <button @click="increase">증가</button>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const counter = ref(0);
    const increase = () => counter.value++;
    return { counter, increase };
  }
};
</script>

TypeScript 통합

Vue 3는 TypeScript와 깊이 통합되어 있습니다. 이를 통해 강력한 타입 검사를 제공하며, 런타임 오류를 줄일 수 있습니다.

프로젝트 생성

Vite를 활용한 프로젝트 설정

Vite는 새로운 세대의 프론트엔드 도구로, 빠른 개발 환경을 제공합니다. 특히 HMR(Hot Module Replacement) 기능이 탁월합니다.

npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install
npm run dev

주요 API 설명

변수 정의

Composition API에서 변수는 보통 ref 또는 reactive를 사용하여 정의됩니다.

import { ref, reactive } from 'vue';

const numberValue = ref(0); // 기본 데이터 형식
const objectValue = reactive({ name: 'John' }); // 객체 또는 배열

계산된 속성

데이터 간의 연관성을 처리할 때 유용합니다.

import { computed, ref } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => `${firstName.value} ${lastName.value}`);

속성 감시

특정 값이 변경될 때마다 동작하도록 설정할 수 있습니다.

import { watch, ref } from 'vue';

const value = ref(0);
watch(value, (newVal, oldVal) => {
  console.log(`값 변경됨: ${oldVal} → ${newVal}`);
});

라이프사이클 훅

Vue 3에서는 조합형 API를 사용하여 각 라이프사이클 단계를 더 명확하게 처리할 수 있습니다.

import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  console.log('컴포넌트가 마운트되었습니다.');
});

onUnmounted(() => {
  console.log('컴포넌트가 언마운트되었습니다.');
});

부모-자식 컴포넌트 통신

부모와 자식 컴포넌트 간의 데이터 전달은 props와 emits를 사용하여 처리됩니다.

// 부모 컴포넌트
<ChildComponent :message="parentMessage" @child-event="handleChildEvent" />

// 자식 컴포넌트
defineProps(['message']);
const emit = defineEmits(['child-event']);
emit('child-event', data);