Vue 3 Composition API : Option API -> Composition API

📘 Frontend/Vue

Vue 3 Composition API : Option API -> Composition API

신건우 2023. 8. 8. 16:29

Vue 3 Composition API

지금까지 배운 Option API에서는 data, methods, computed property, watcher등을 사용했습니다.

Composition API란 컴포넌트를 작성하는 2가지 방법 중 하나일뿐 Option API 보다 무조건 좋은건 아닙니다.

Composition API를 사용하는 이유

Option API는 필요한 데이터 프로퍼티, 함수, 연산 프로퍼티 등등이 각 컴포넌트마다 전부 다 분산되있거나 중복 로직이 발생
Option API는 컴포넌트 로직의 재사용이 까다롭다.

Option API

로직을 여러가지 옵션 (data, methods 등)에 나누어 놓는 방식

// Option API
data() {
    return {
        name: 'Max'
    };
},

methods: { 
    do Smth() 
}

Composition API

setup() 함수를 사용하여 로직을 번들로 만들어 컴포넌트 구성 객체에 추가하는 방식

// Composition API
setup() {
const name = ref('Max');
function doSmth() { ... }
return { name, doSmth };
}

템플릿 코드나 v-if, 데이터 바인딩 같은 기능들은 Vue 2-3 모두 똑같고 컴포넌트 구성 객체의 코드 설정만 바꾸는것이 Composition API라고 할 수 있습니다.

즉, 기존의 컴포넌트 로직을 구성하는

data
methods
computed
watch

옵션을 Composition의 setup() 함수로 대체 가능하다는 점입니다.

추가적으로 Vue의 Lifecycle 함수들도 약간의 변경이 있는데 이건 나중에 배워보도록 하고,

컴포넌트를 구성하는 기존의 Option API의 변경점부터 배워보겠습니다.

Data -> Refs

위에 말했듯이 Composition API는 Property, emits 등과 같은 다른 기능들은 똑같고,

컴포넌트를 구성하는 방법만이 바뀌었을 뿐입니다.

그 중 기존 Option API 에서의 Data를 Ref로 대체하는 방법을 배워보겠습니다.

App.vue

다양한 요소를 불러올 수 있게 해주는 중요한 구문인 ref를 Import 해줍니다.

이 ref는 기존 Option API에서의 data를 대체합니다.

그리고, 이 ref는 참조를 생성하는데 DOM 요소에 대한 참조가 아닌, 값을 참조해 템플릿에서 사용 가능하게 합니다.

이 값은 아무런 값이나 생성하는 것아 아닌, 반응형 값을 생성하기 때문에 이 값을 바꾸면,

Vue도 인식하고 감시할 수 있어서 값이 바뀌거나 템플릿에 바인딩되면 Vue는 DOM에서 템플릿을 업데이트 합니다.

이제 위에서 말했듯 ref는 값을 생성하니까 그 값을 변수나 상수에 저장하면 반응형 값이 됩니다.

그리고, setup()은 템플릿에서 사용할 구성 요소를 작성 후, 항상 객체를 반환합니다.

이 객체는 실제 값을 바인딩 하거나 사용할 수 있습니다.

<script>
import { ref } from 'vue';

export default {
    // 이런 옵션들은 기존 Vue2와 동일함
    component: [],
    props: [],

    // Composition API
    setup() {
        // ref에 저장하는 값은 value가 됨
        const userName = ref('Maximilian');


        return {
            userName: uName;
        };

    }
}
</script>

주의할 점

setup() 함수는 컴포넌트의 시작 프로세스 이전에 적용되므로 기존 Vue2 Option API를 사용할때,

자주 사용하던 this 키워드는 못쓰게 되었고 프로퍼티에도 접근할 수 없습니다.

왜냐면 컴포넌트가 실행되기 전에 실행되는 프로세스 중 하나가 setup() 이기 때문입니다.

이제 반응형 값이라는게 무슨 의미인지 타이머를 설정해서 알아보겠습니다.

타이머 내의 함수에서 ref의 값을 Max로 바꿔주었습니다.

<script>
import { ref } from 'vue';

export default {
    // 이런 옵션들은 기존 Vue2와 동일함
    component: [],
    props: [],

    // Composition API
    setup() {
        // ref에 저장하는 값은 value가 됨
        const userName = ref('Maximilian');

        // 2초가 지나고 변화를 감지해 DOM 업데이트
        setTimeOut(function() {
            userName.value = 'Max';
        }, 2000);

        return {
            userName: uName;
        };

    }
}
</script>

즉 setup 함수에서 ref를 활용한 경우 Vue가 자동으로 변화를 감지하고 DOM을 업데이트 합니다.

Setup 함수 바꾸기

많은 컴포넌트에서 컴포지션 API를 사용하는 경우, 이전 섹션에 따라 내보낸 객체에 setup()메서드를 추가하면 성가실 수 있습니다.

특히export default { ... }을 추가하고 컴포넌트의<template> 에서 사용할 수 있는 값을 반환해야 해서 그렇습니다.

Vue.js는 이를 대체할 구문을 제공합니다.

setup() 메서드를 수동으로 추가하지 않고 <script setup>을 사용할 수 있습니다.

다음과 같은 코드를:

<script>
import { ref } from 'vue';

export default {
    // 이런 옵션들은 기존 Vue2와 동일함
    component: [],
    props: [],

    // Composition API
    setup() {
        // ref에 저장하는 값은 value가 됨
        const userName = ref('Maximilian');

        // 2초가 지나고 변화를 감지해 DOM 업데이트
        setTimeOut(function() {
            userName.value = 'Max';
        }, 2000);

        return {
            userName: uName;
        };

    }
}
</script>

다음으로 대체 가능 합니다.

<script setup>
import { ref } from 'vue';

const uName = ref('Maximilian');

setTimeOut(function() {
    uName.value = 'Max';
}, 2000);
</script>

script setup과 setup() 메서드 중 어느 것을 사용하든 여전히 같은 방식으로 작동합니다.

저작자표시