Vue 입문 - Vue란 무엇인가

Vue3 주요 특징

Vue3는 Vue.js의 최신 버전입니다. SPA 개발을 위한 프레임워크로 , MVVM(Model-View-ViewModel)을 기반으로 합니다. Vue 3는 여러 가지 성능 개선과 기능 추가가 이루어진 버전으로, 특히 Composition API라는 새로운 기능이 도입되었습니다.

Composition API

Composition API가 도입되기 전과 후의 차이점은 주로 코드 작성 방식과 구조적인 유연성에 있습니다. Composition API 도입 전에는 Options API를 이용해서 코드를 작성하였는데, 아래 코드와 같은 모습으로 로직을 작성합니다.

export default {
  data() {
    return {
      counter: 0,
    };
  },
  methods: {
    increment() {
      this.counter++;
    },
  },
  computed: {
    doubleCounter() {
      return this.counter * 2;
    },
  },
  mounted() {
    console.log('Component mounted');
  },
};

컴포넌트의 상태는 data(), 메서드는 methods, 계산된 속성은 computed, 그리고 라이프사이클 훅은 created, mounted와 같은 곳에 따로 정의됩니다. Options API는 직관적이고 초보자 친화적이며 구조가 명확하지만 코드 재사용이 어렵고 코드 가독성이 저하되는 문제가 있었습니다.

Composition API 도입 후에는 setup 함수 내에서 상태, 메서드, 계산된 속성, 라이프사이클 등을 모두 관리할 수 있게 되었습니다.

import { ref, computed, onMounted } from 'vue';

export default {
  setup() {
    const counter = ref(0);

    const increment = () => {
      counter.value++;
    };

    const doubleCounter = computed(() => counter.value * 2);

    onMounted(() => {
      console.log('Component mounted');
    });

    return {
      counter,
      increment,
      doubleCounter,
    };
  },
};

Composition api는 Vue3로 넘어오면서 개선된 부분입니다.

options api를 사용하여 두 가지 관심사를 다룬다고 할 때, data내부에 두 가지 관심사 변수, methods에 두 가지 관심사 메소드가 들어있다고 할 경우 코드가 길어지거나, 관심사가 많아질 경우 굉장히 불편해 집니다. 컴포지션 api를 사용한다면 논리적 관심사를 분리할 수 있다는 장점이 있습니다.
컴포지션 api의 가장 큰 장점은 composable 함수의 형태로 로직의 재사용이 가능하다는 것입니다. options api의 기본 로직 재사용 매커니즘인 mixin의 모든 단점을 해결합니다.

---

그 외

반응형 시스템 개선

Vue 3는 내부적으로 반응형 시스템을 개선하여 더 나은 성능을 제공합니다. 특히 큰 규모의 애플리케이션에서 성능이 향상됩니다.

프레임워크 크기 축소

Vue 3는 Vue 2에 비해 더 작고 가볍습니다. 이는 빠른 로딩 속도와 더 나은 성능을 제공합니다.

TypeScript 지원 강화

Vue 3는 TypeScript를 기본적으로 더 잘 지원하며, 타입 안전성을 더 쉽게 관리할 수 있습니다.

프래그먼트 및 여러 루트 노드 지원

이제 컴포넌트에서 여러 루트 노드를 지원하며, 더 유연한 컴포넌트 구조를 만들 수 있습니다.

---

리액트와 Vue 3 비교

개발 방식

Vue3 : HTML, CSS, Javascript를 명확히 분리된 방식으로 다룹니다. template 태그 안에는 HTML, script 태그 안에는 Javascript, style 태그 안에는 CSS가 위치합니다. 템플릿 기반 렌더링 방식을 선호하는 경우 Vue가 더 직관적일 수 있습니다.

React : React는 JSX라는 문법을 사용하여 Javascript 코드 안에 HTML과 유사한 구조가 포함됩니다.

상태 관리

Vue3 : 상태 관리 라이브러리인 Vuex가 존재하며, Composition API를 통해 컴포넌트 레벨에서 더 유연하게 상태 관리를 할 수 있습니다.

React : 상태 관리를 위해 Redux나 Context API 등을 사용하는, Redux가 많은 설정과 구조화를 필요로 해 러닝 커브가 있는 편입니다.

성능

Vue3 : 큰 애플리케이션에서 성능이 크게 개선되었습니다. 가볍고 빠르며, 초기 로드 시간도 짧습니다.

React : Virtual DOM을 이용하여 성능이 좋은 편이지만, 애플리케이션 규모가 커질수록 성능 최적화에 신경써야 합니다.