Vue: Composition API

hyewon ji·2023년 6월 18일

composition api vue3

Vue3

목록 보기

1/1

Vue의 Composition API가 기존 Option API와 어떤 점이 다른지 알아보자

1. Options API의 문제점

Options API에서 데이터를 다루는 방법은 아래와 같다.

mixin.js

const mixin = {
  created() {
    this.addBook({'나미야잡화점의 기적', '히가시노 게이고'})
  }
}

component.js

import mixin from 'mixin.js'
export default {
  mixin: [mixin]
  data() {
    return {
      books: []
    };
  },
  methods: {
    addBook(title, author) {
      this.books.push({ title, author });
    }
  },
  computed: {
    formattedBooks() {
      return this.books.map(book => `${book.title}은 ${book.author}가 썻다`);
    }
  }
};

mixin의 created 생명주기와, methods의 addBook함수에서 data의 books를 변경했다.
또한, computed에서 data의 books를 사용한다.
이때, data에 저장된 books가 어디서 변경되었는지
추적하기 어려워 유지보수가 힘들다는 단점이 있다.

2. Composition API

Composition API는 옵션 선언 대신 import한 함수를 사용한다.
setup 훅을 사용해 data와 function을 구성한다.

2-1. import 함수의 종류

1. 반응형(Reactivity) API

Option API에서 data에 상태를 저장해 사용했다면,
Composition API에서는 ref() 및 reactive() 함수를 를 사용하여 상태를 저장 및 변경할 수 있다.

setup() {
  const person1 = ref({ name: "gildong", age: 20 });
  const person2 = reactive({ name: "gilyoung", age: 23 });

  const handleClick = () => {
    // ref로 감싼 값을 변경할 때는 value로 한번 들어가주고 값을 바꾼다.
    person1.value.age = 25;

    // reactive는 바로 값을 바꾼다.
    person2.age = 25;
  };

  // ref값은 return을 거치게되면 person1.value.age는 person1.age로 바뀝니다. (template에서는 person1.age로 사용합니다)
  return { person1, handleClick };
},
created () {
  console.log(person1.age, person2.age) // 25, 25
}

주의할점은, reactive는 원시값에 대해서는 반응형을 가지지 않아
통일성을 위해 ref만을 사용하는것이 좋아보인다.

2. 생명주기 훅

Option API에서 mounted, created 등의 생명주기를 옵션으로 상용했다면,
Composition API에서는 onMounted() 및 onCreated()와 같이 기존 생명주기 앞에 'on'을 붙인 함수를 import 해서 사용할 수 있다.
참고로, 좋은 방법은 아닌것 같지만 기존 Option API의 생명주기와 Compoistion API 생명주기를 함께 사용할 수도 있다.

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

const el = ref()

onMounted(() => {
  el.value // <div>
})
</script>

<template>
  <div ref="el"></div>
</template>

3. 의존성 주입

Composition API에서는 provide() 및 inject()를 사용해 Vue의 의존성 주입 시스템을 활용할 수 있다.

4. 그 외, 재사용할 함수들 (util 등)

여러 함수가 하나의 객체 안에 들어있는 mixin 보다, 함수를 추적하고 재사용하기 용이하다.

hyewon ji