[Vue] Vue 정리하기(5) - Vue3 composition api 1편

(공식문서와 여러 블로그를 참조했지만 내가 이해한 게 잘못된 부분이 있을 수도 있다 이런 부분은 댓글에 남겨주길 바란다.)

 

오. 늘. 은. 뷰3 컴포지션 api에 대해 알아보려 한다.

 

뷰 버전 3가 릴리즈 된 지 대략 3년 정도 되었다

 

뷰 2는 올해 말에 지원을 종료한다고 하고

 

뷰2를 써왔던 프로젝트들은 뷰3로 마이그레이션을 하고

 

이제 새로 시작하는 프로젝트는 대부분 3 버전을 사용하는 것 같다.

 

아무튼 그래서 오늘은 뷰3 composition api가 뭔지 뷰2와 어떤 차이가 있는데 알아보도록 하자

 

나는 공식문서 https://ko.vuejs.org/guide/extras/composition-api-faq.html와

vue3 composition api 사용법, vue, computed, reactive, ref, watch, watchEffect, props, vuex, composable

이 분의 블로그와 여러 블로그들을 참고 하였다

 

---

composition api

 

컴포지션 api 그게 먼데????????????

 

"컴포지션(Composition) API는 옵션을 선언하는 대신 import한 함수를 사용하여 Vue 컴포넌트를 작성할 수 있는 API 세트입니다."

 

ㅎ

공식문서에는 일단 저렇게 나와있다

저게 뭔 말일가 ㅎ...

 

일단 기존 vue2에서는 옵션 api를 사용했는데 vue3에서는 컴포지션 api를 사용한다는 것이 가장 큰 차이이다

 

vue3 버전에서도 기존 옵션 api는 사용 가능 하다고 한다.

 

옵션 api에서는 역할별(data면 data method 면 method)로 나누어서 코드를 작성했다면 컴포지션 api에서는 논리적인 관계로 나누어서 코드를 작성하는 것이 가장 큰 차이점이라고 한다.

 

이렇게 말해도 이게 뭔 소리인가 싶을 거다

 

내가 이해한 느낌으로 한번 설명해 보겠다.

 

만약에 data1이라는 데이터가 있고 그것을 function1이라는 함수에서 사용한다고 치자 

(쨌든 data1이랑 function1은 논리적으로 엮여있는 거임)

 

 

그림으로 설명하는 게 편할 거 같아서 한번 그려봤다.

 

성의 없어 보이지만 마우스로 그리느라 꽤나 힘들었다.

 

아무튼 그림을 설명하자면

 

옵션 api는 저렇게 데이터면 데이터 메서드면 메서드를 따로 작성한다.

 

역할별로 나눠서 작성하니까 코드를 역할별로 나누어 보기에는 좋은 장점이 있다.

 

반면 컴포지션 api는 setup안에서 역할이 아닌 비슷한 논리로 묶여있는 애들끼리 코드를 작성한다.

(function1 에서 data1을 사용한다고 가정했음)

 

그래서 저 차이가 가장 큰 차이인데 

 

그럼 이제 유지보수 측면에서 생각을 해보자

 

예시처럼 뭐 데이터나 함수가 하나밖에 없으면 당연히 큰 차이를 느끼지 못할 거다

 

하지만 저런 데이터나 메서드가 정말 많은 컴포넌트가 있다고 가정하자

 

메서드 하나를 수정하는데 옵션 api의 경우에는 메서드를 검색해서 찾은 다음

다시 스크롤을 올려서(혹은 내려서) 해당 메서드에서 사용된 data를 찾아야 한다

 

하지만 컴포지션 api의 경우 비슷한 논리 관계가 있는 친구들은 같이 묶여서( 코드상 가까이에)

위치하기 때문에 이런 유지보수 측면에서 더 수월하다고 할 수 있다.

 

(또한 재사용 적인 측면이나 타입스크립트를 사용하는 데 있어서 컴포지션 api가 더 유리하다고 한다)

 

공식문서 사진

 

공식문서에서는 이러한 사진으로 차이점을 설명하고 있다

 

이제는 진짜 이해가 됐을 거라고 믿는다 (믿고 싶다)

 

무튼 앞에서 설명한 부분이 vue가 2에서 3로 가면서 가장 크게 달라진 점이다.

 

부디 내 글을 보고 잘 이해가 됐길 바라며 다음편에서는 구체적으로 어떻게 코드를 작성하는지 예시를 보며 알아보도록 하자!