Composition API 후기(1)

입사 후에 한참 사용하던 Nuxt.js에 익숙해져있는 상태에서

백오피스 개편 작업으로 맛본 Vue3 Composition API (추가로 Typescript까지)

 

기존 Vue2에서 Option API를 사용하면서 Composition API의 장점을 봤을 때,

직접 실무 프로젝트에 사용해보는 기회를 접하고 싶었다.

어떻게, 얼마나 내가 기대하는 만큼 코드가 재사용성이 높아지고, 간결해질지 궁금했다.

 

결론적으로는 아직 Composition API의 크나큰 장점을 제대로 살려내지 못해 아쉬움이 남았다.

 

다음은 이번 실무에 진행한 내 작업 방식이다.

 

폴더 구조(예시 컴포넌트명)

Tab
├ Component
│  ├ Top.vue
│  ├ List.vue
│  └ Tab.vue
├ Composable
│  ├ user.ts
│  └ book.ts
├ Login.vue
└ Search.vue

Composable에서 만든 함수와 변수들을 묶어서 페이지(Login.vue나 Search.vue)에서 Provide를 사용해서뎁스와 관계없이 자식컴포넌트에서 Inject를 통해 그대로 가져와서 사용했다.

 

결과적으로는 Composition API 가 아닌 Option API였다. props 대신에 새로운 기능이었던 Provide와 Inject를 사용한 차이? 설계 미스였다.

대신에 이렇게 사용하면 자식 컴포넌트에서 값을 수정했을 때에도 바인딩된 값이 모든 곳에 그대로 적용된다.