[Vue] Vue2 에서 Vue3 로! 마이그레이션 작업 중 발견한 변화 기록!

기존 회사 내에서 작업 중이던 백오피스는 Vue2 환경으로 되어있었는데, 이를 Vue3로 마이그레이션하는 작업을 맡게 되어서 그 과정들을 기록해보려한다.

1. slot, slot-scope

• 기존 작성 방식

<div slot="content" slot-scope="data">
  <span>{{ data.row.name }}</span>
</div>

• 바뀐 작성 방식

<template #content="data">
  <span>{{ data.row.name }}</span>
</template>

바뀐 방식에서는 slot이라는 표현 대신 간단하게 #으로 표기해주면 되고, slot-scope 역시 =로 연결해서 작성 가능해 간결해졌다. (주의! # 표시는 template 태그 안에서만 사용가능하게 변경되어서, 다른 태그 속에 # 을 사용하면 에러가 발생한다.)

2. 컴포지션 API

컴포지션 API는 공식 문서 내에서는 아래와 같이 어려운 말로 설명이 되어있는데,,

컴포지션(Composition) API는 옵션을 선언하는 대신 import한 함수를 사용하여 Vue 컴포넌트를 작성할 수 있는 API 세트이다.

그냥 간단하게 정리하면, 컴포지션 API는 모든 코드를 독립적으로 정의할 수 있게 해주고, 각 기능을 함수로 묶어 처리하기 때문에 특정 기능의 유지보수가 좀 더 쉬워질 수 있다는 점이 특징이라고 보면 된다.

• 기존 작성 방식

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>

<script>
export default {
  data() {
    return {
        count: 0,
    }
  },
  methods: {
    increment() {
        ++this.count;
    },
  },
}
</script>

• 바뀐 작성 방식

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const count = ref(0)
const increment = () => {
  return count.value++;
};
</script>

3. life cycle 변경

vue2          | vue3
--------------------------------
beforeMount   | onBeforeMount
mounted       | onMounted
beforeUpdate  | onBeforeUpdate
updated       | onUpdated
beforeDestroy | onBeforeUnmount
destroyed     | onUnmounted
errorCaptured | onErrorCaptured

4. emit 방식 변경

• 기존 emit 방식

// 부모 컴포넌트
<ChildComponent @openModal="openModal" />

// 자식 컴포넌트
<button @click="$emit('openModal')"/>

• 바뀐 emit 방식

<script setup>
  defineEmits(['openModal']);
</script>

5. ref, reactive

컴포지션 API에서 반응형 상태를 선언하는 방법으로 ref 함수를 권장하고 있다.
ref 객체는 반응형이며, value 속성에 새 값을 할당할 수 있다.
.value에 대한 모든 읽기 작업이 추적되고, 쓰기 작업은 관련 이펙트를 트리거한다.

• 사용법

import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 0

count.value = 1;
console.log(count.value); // 1

reactive 함수는 "내부 깊숙이 있는(deep)" 모든 중첩 속성에 영향을 준다.

• 사용법

import { ref, reactive } from 'vue';

const count = ref(1);
const obj = reactive({ count });

// obj.count인 ref는 언래핑 됨
console.log(obj.count === count.value); // true

// `obj.count`도 업데이트 됨
count.value++;
console.log(count.value); // 2
console.log(obj.count); // 2

// `count` ref도 업데이트 됨
obj.count++;
console.log(obj.count); // 3
console.log(count.value); // 3