Vue Composition API

지금까지 포스팅 한 것을 보면 기본 문법의 대부분 Vue2에서 사용하는 옵션스 API 방법이다.

하지만, 요구하는 기능이 복잡해지고 다양한 로직을 유연하고 조직적으로 구성하고 관리하기 위한 방법으로 Vue3에서는 컴포지션 API를 제공한다.

함수 기반 접근 방식 제공하여 개발자가 기능별로 코드를 구성할 수 있게 지원한다.

옵션스API : data, computed, methods, lifecycle hook 포함한 객체 기반 옵션 속성으로 구성된 API

구분	옵션스API	컴포지션API
장점	직관적 쉽게 배울수 있음 소규모 애플리케이션에 적합함	함수 친화적 기능별로 코드를 작성하기 쉬움 로직의 재사용성이 좋음 대규모 애플리케이션에 적합함
단점	컴포넌트가 복잡해질수록 관련 로직이 분산되어 코드의 재사용성과 가독성이 떨어짐	옵션스API에 비해 알아야 하는 요소가 더 많음

 

레거시(legacy) 시스템 : 현재 유지되고 있는 서비스

 

컴포지션 API는 옵션스 API의 대체가 아닌 확장의 목적으로 도입됨.

• setup() 훅(hook)
• vue3에서 추가된 컴포지션 API 문법 사용이 가능하다.
• 설탕문법(sugar syntax) 형태의 <script setup></script>

뷰에서는 컴포넌트 전반에서 사용하는 데이터(값) 정의 방법을 알아야 한다.

• 옵션스API에서는 반응형 데이터를 data옵션 객체를 이용하여 데이터 속성을 정의하였다.
• 컴포지션 API에서는 ref, reactive() 함수를 사용한다.

ref()

• 어떤 값을 사용해서 반응형 데이터를 정의할 것인지
• 이때 사용하는 값의 자료형은 숫자, 기본자료형, 참조 자료형 구분없이 사용 가능(내부 데이터까지 반응성을 제공하지 않는다.)
• 참조자료형에 대한 반응성을 제공하기 위해서는 reactive()를 사용 -> 값 자체를 반응형으로 만들어 리턴한다.

옵션스API에서는 template 태그의 DOM 요소에 접근하려면 $refs 전역 속성을 사용해야 한다.

컴포지션 API에서는 ref() 함수로 생성한 반응혀 데이터를 HTML 태그의 ref 속성의 값으로 지정해서 DOM 요소를 참조할 수 있다.

 

<script setup>

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

const refCount = ref(0);

const reactiveCount = reactive({count:0});

const refDoubleCount = computed(()=>refCount.value + 2);

const reactiveDoubleCount = computed(()=>reactiveCount.count + 2);

//ref와 computed() 처리한 데이터는 value를 사용한다.

console.log(refDoubleCount.value);

console.log(reactiveDoubleCount.value);

</script>

<template>

<h1>{{ refDoubleCount }}</h1>

<h1>{{ reactiveDoubleCount }}</h1>

</template>