Options API vs Composition API

Chocolajin·2023년 1월 21일
0

Vue3

목록 보기
5/7
post-thumbnail

Vue3에서 애플리케이션을 만들 수 있는 방법은 크게 두 가지가 있다.

Vue2에서 사용해왔던 Options API를 사용하는 방법과
Vue3에서 새롭게 등장한 Composition API 를 사용하는 방법이다.

Options API의 단점을 보완하기 위해 Composition API 등장했으며, Vue3에서는 Composition API 권장한다.

Composition API란?

Composition API는 옵션(data, methods, ...)을 선언하는 대신 가져온 함수(ref, onMounted, ...)를 사용하여 Vue 컴포넌트를 작성할 수 있는 API 세트를 말한다.

왜 Composition API?

Composition API를 사용하면 동일한 논리적 관심사 코드가 그룹화 되어 코드를 분석하기도 쉽고 유지보수가 용이하다. 또한 논리적 관심사 코드를 외부 유틸 파일로 추출하기가 쉽다.

코드 재사용성

Composition API의 가장 큰 장점은 Composable 함수의 형태로 로직의 재사용이 가능하다는 것이다.
Options API의 기본 로직 재사용 메커니즘인 Mixins의 모든 단점을 해결한다.

Compositions API는 Options API가 가지고 있던 2가지 주요 제한 사항을 해결한다.

  • hook를 사용하여 관련 코드 조각을 함께 그룹화
  • Composables을 사용하면 애플리케이션 전체에서 코드를 매우 쉽게 재사용

Options API와 관계

Options API와 관계

Composition API로 기존 모든 사용 사례를 커버 가능?

Composition API를 사용할 때 여전히 필요할 수 있는 몇 가지 옵션(props, emits, name 및 inheritAttrs)만 있습니다.

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

네. Options API 구성 요소의 setup() 옵션을 통해 Composition API를 사용할 수 있습니다.
그러나 기존 옵션 API 코드베이스가 있는 경우에만 그렇게 하는 것이 좋습니다. (예를 들어 Composition API로 작성된 외부 라이브러리와 통합해야 하는 경우)

Options API가 deprecated 될 예정인가요?

아니요, 그렇게 할 계획이 없습니다. Options API는 Vue의 필수적인 부분이며 많은 개발자들이 Vue를 좋아하는 이유입니다. 또한 합성 API의 많은 이점은 대규모 프로젝트에서만 나타나고 옵션 API는 복잡도가 낮거나 중간인 많은 시나리오에 대한 확실한 선택으로 남아 있습니다.

profile
뱁새 개발자 황새 따라잡다

0개의 댓글