[Vue] 3. Composition API, 넌 도대체 뭐냐! (feat. Vue.js 3)

2020년 9월 19일, 오랜 기다림 끝에 vue-next, vue.js 3(이하 Vue3)가 정식 릴리즈 되었습니다. 그로부터 1년이 지났지만 아직도 사용하기엔 많은 라이브러리나 플러그인들이 Vue3을 지원을 해주지 않고있습니다. 과연 이 변화가 Vue를 더 나은 생태계를 가지게 할지, 다른 라이브러리처럼 역사 속으로 사라지게할지 Vue를 사용하는 개발자로써 궁금하네요.

Vue3에서 달라진 점은 migration 문서의 소개에서 자세히 확인해 볼 수 있습니다. 중요한 여러 변화점들이 있지만 제가 정리하는 것보다 공식문서를 확인해보시는걸 추천드립니다.

추가된 여러 기능과 변경된 많은 것들 중에서 오늘 살펴볼 것은 Composition API입니다.

Composition API는 기존의 Options API가 하던 역활을 수행할수 있는 API입니다. 그러면 왜 Composition API를 추가했을까요? 기존의 Options API의 구조를 생각해보면 다음과 같이 예를 들 수 있습니다.

위 사진에서는 특정 데이터를 제어하긴 위한 코드를 같은 색상으로 표시했습니다.
선언은 data에서, 관련 함수는 method에서, 계산된 표현값은 computed에서 정의하다보니 코드가 분산되는것을 확인할 수 있습니다. 이는 컴포넌트가 복잡해질수록 더욱 심화됩니다.

이를 개선하기 위해 Composition api에서는 관련된 코드를 한 곳으로 모았습니다.

import { ref, computed } from 'vue'

export default function useRepositoryNameSearch(repositories) {
  const searchQuery = ref('')
  const repositoriesMatchingSearchQuery = computed(() => {
    return repositories.value.filter(repository => {
      return repository.name.includes(searchQuery.value)
    })
  })

  return {
    searchQuery,
    repositoriesMatchingSearchQuery
  }
}

위의 코드를 살펴보면, ref를 통해 데이터를 선언하고, computed를 통해 계산된 값을 제공합니다. 데이터 단위로 관련된 코드가 모여 파악하기가 보다 수월해집니다.

이외에도 ref로 랩핑된 객체를 반환하여 사용함으로, 객체를 전달할 때, 정상적으로 추적이 유지되는지 걱정할 필요를 덜게 되었습니다.

정말 찍먹수즌으로 Composition API가 왜 나왔는지에 대해서 살펴보았습니다. 문법이나 자세한 내용은 공식문서에 잘 정리되어 있으니 꼭 살펴보시길 바라고, 오늘은 Vue2에서 Vue3 넘어가는 큰 모험을 왜 진행했는지 살펴보았습니다.