layout: post title: Vue3에서 Composition API 이해하기 categories: [dev] tags:

• vue
• nodejs
• typescript author: 심동근 email: [email protected] date: 2021-11-30

들어가기 앞서

Vue3의 Composition API에 대한 공식 문서를 읽었는데 한 번에 이해가 되지않았다. 그래서 해당 내용을 설명 및 주관적 의견을 붙여 재작성했다.

Composition API란

Vue2에서 컴포넌트 작성시 우리는 여러 기능들을 Vue의 API 옵션들(data, method, watch 등)에 나눠서 작성했다. 한 기능에 대한 소스코드가 이곳 저곳에 분리되어있는 것이다. 그럼으로써 소스코드 이해가 어려지고 유지보수 및 코드 재사용이 힘들어졌다.

Composition API는 소스코드를 기능별로 응집시킬 수 있게 된다. 그러므로 어떤 기능에 대한 소스코드 분석시 해당 기능이 작성되있는 소스코드 뭉텅이만 보면된다.

Vue2에서의 소스코드

아래는 유저 레포지토리에서 리스트를 출력하는 컴포넌트이다. 그리고 기능으로는 검색 및 필터가 있다.

// src/components/UserRepositories.vue

export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: { type: String }
  },
  data () {
    return {
      repositories: [], // 1
      filters: { ... }, // 3
      searchQuery: '' // 2
    }
  },
  computed: {
    filteredRepositories () { ... }, // 3
    repositoriesMatchingSearchQuery () { ... }, // 2
  },
  watch: {
    user: 'getUserRepositories' // 1
  },
  methods: {
    getUserRepositories () {
    }, // 2
    updateFilters () { ... }, // 3
  },
  mounted () {
    this.getUserRepositories() // 1
  }
}

소스코드를 보면 아래의 한 기능에 대한 소스가 분산되있는 것을 확인할 수 있다.

1. 리스트
2. 필터
3. 검색

추후에 기능이 더욱 많아지고 해당 기능에 관한 소스코드를 찾으려면 이해하기 힘들고 시간이 걸릴 것이다.

Composition API 사용법