JS : Vue 3 Composition API : 개념, 예제, 설명

Vue 2에서 Vue 3으로 변경하면 개발자는 구성 요소의 로직을 조립할 때 여러 옵션을 사용할 수 있습니다. 이 글에서는 Vue 3의 기본 사항을 알고 있다고 가정합니다. 인용된 글에서는 Vue 2에서 Vue 3으로 변경된 주요 사항을 설명하고, 구성 API의 작동 방식을 이해하기 위한 기반을 설명합니다. 후자는 이 글의 주요 주제인 Vue 3 구성 API일 것입니다.

 

 

JS : Vue 3 Composition API : 개념, 예제, 설명

 

 

Vue 3 Composition APIs

Vue 2에서 Vue 3으로 변경된 것은 개발자가 구성 요소의 로직을 조립할 때 여러 가지 옵션을 제공합니다. Vue 2에서 했던 것처럼 Options API를 계속 사용하거나 Composition API를 사용할 수 있습니다.

 

 

Composition API의 장점

가장 큰 장점은 논리를 추출하고 다른 구성 요소에서 재사용할 수 있다는 것인데, 이를 통해 우리의 코드는 모듈화되고 유지보수가 용이합니다. 그래서 우리는 Vue2에서 논리를 재사용하는 방법이었던 믹스인을 사용하지 않아도 됩니다. 

계속해서 조직에 대해 이야기한다면, Options API에서 우리는 우리의 구성요소를 탐색하면, 각 구성요소가 코드의 여러 부분으로 나누어질 수밖에 없는 많은 책임을 맡고 있다는 것을 깨닫게 될 것입니다. 파일이 수백 줄로 구성되어 있다면, 이는 우리가 위 아래로 스크롤해야 하는 것보다 더 복잡한 일입니다. 따라서 재사용 가능한 부분에서 논리를 추출하려고 하면, 비록 작업이 조금 더 필요할지 모르지만, 그 결과는 훨씬 깨끗하고 깔끔하다는 것을 알 수 있을 것입니다. 다음 이미지에서 확인할 수 있습니다:

 

JS : Vue 3 Composition API : 개념, 예제, 설명 2

 

 

또 다른 중요한 이점은 객체 지향적인 Options API와 달리 기능적 프로그래밍이 가능하다는 것입니다.

Composition API를 이용하여 작성된 코드는 Options API 코드보다 효율적이고 수정 가능하므로 번들 크기가 작아질 것입니다. 저희 <script setup>의 템플릿은 동일한 코드 범위 내에서 인라인 함수로 컴파일되기 때문입니다. 이러한 속성과 달리 컴파일된 코드는 프록시 없이 변수에 직접 접근할 수 있습니다. 이 때문에 단순화된 변수 이름을 가질 수 있어 가중치가 적도록 도와줍니다.

새로운 API를 사용하면 구성 요소의 동작, 비동기/대기, 약속, RxJS와 같은 타사 라이브러리의 사용 촉진 등을 정의하여 자바스크립트를 최대한 활용할 수 있습니다.

 

 

Composition API의 단점

가장 큰 단점은 개발자들에게 새로운 구문과 코드 구성 방법을 학습하도록 강요한다는 것입니다. 이는 Options API에 익숙한 사람들에게는 학습 곡선을 가질 수 있습니다. 그래도 간단하고 쉽게 학습할 수 있도록 설계되어 있으므로 곡선이 빨라야 합니다.

 

 

첫 단계

템플릿:

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

 

 

옵션 API:

<script>
export default {
  // Properties returned from data() become reactive state
  // and will be exposed on `this`.
  data() {
    return {
      count: 0
    }
  },

  // Methods are functions that mutate state and trigger updates.
  // They can be bound as event listeners in templates.
  methods: {
    increment() {
      this.count++
    }
  },

  // Lifecycle hooks are called at different stages
  // of a component's lifecycle.
  // This function will be called when the component is mounted.
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

 

 

구성 API:

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

const count = ref(0)

const increment = () => {
  count.value++
}

onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

 

 

React Hooks와의 비교

React Hooks와 비교하면 논리는 동일하지만 약간의 차이가 있습니다.

 

React Hooks: 

후크는 구성 요소의 업데이트가 있을 때마다 호출됩니다.

후크 닫힘에서 선언된 변수는 올바른 종속성을 전달하지 않으면 더 이상 쓸모가 없게 될 수 있습니다.

과중한 계산은 Memo를 사용해야 하며, 이를 사용하려면 의존성을 수동으로 전달해야 합니다.

보조 구성 요소로 전달된 이벤트 핸들러는 기본적으로 불필요한 코드 업데이트를 발생시킵니다. 이를 무시하면 거의 인식하지 못한 채 성능에 영향을 미치는 과도한 업데이트가 발생합니다.

 

Vue Composition API:

setup() 또는 <script setup> 코드는 한 번만 호출됩니다.

Vue의 반응성 시스템 런타임은 반응성 종속성을 검색하므로 수동으로 선언할 필요가 없습니다.

하위 구성요소를 업데이트하기 위해 콜백 기능을 수동으로 제어할 필요가 없습니다. Vue는 구성요소가 정말 필요할 때만 업데이트되도록 합니다.

즉, 리액트 훅은 컴포지션 API를 만드는 데 주요한 영감을 주었지만 위에서 언급한 문제를 해결하려고 노력했습니다.

 

 

FAQ

Options API가 비활성화됩니까?

아니요, 계획된 것이 아니라 뷰의 일부이고 그걸 좋아하는 개발자들이 많아요. 게다가 컴포지션 API의 많은 장점들은 대형 프로젝트에서만 느낄 수 있기 때문에 옵션 API는 여전히 중소 프로젝트에 좋은 선택입니다.

 

두 API를 함께 사용할 수 있습니까?

네, Options API에서 setup() 메서드를 사용하여 Composition API를 사용할 수 있습니다. 단, Options API에 코드가 있고 Composition API에 작성된 일부 라이브러리를 통합해야 하는 경우에만 권장합니다.

 

컴포지션 API가 Vue 2와 호환됩니까?

아니요, Composition API를 사용하려면 프로젝트 Vue 3을 업그레이드해야 합니다.

 

 

결론

결론적으로, 두 API 모두 Vue 컴포넌트의 로직에 유효합니다. Composition API는 코드를 구성하는 기능적이고 재사용 가능한 방법을 제공하며, Options API는 기존 솔루션인 Object oriented를 제공합니다. 그래도 원하는 것이 성능과 코드 가독성이 향상되고 대규모 프로젝트를 수행하는 경우 Composition API를 선택해야 합니다.