DEVOCEAN

Vue 기반의 Nuxt를 이용한 신규 프로젝트를 시작하게 되면서 너무나 쓰고 싶었던 Composition API를 도입해 볼 수 있었습니다.

실제 사용해 보면서 느꼈던 점을 공유합니다.

왜 도입했나?

Vue3 기반으로 한 라이브러리도 적고 하위 브라우저 호환성도 장담할 수 없었기 때문에 Vue3를 도입하는 건 아직 시기 상조라는 판단이 들었습니다

하지만 언젠가는 Vue3로 넘어가야 할 테고 그 중간 단계인 Composition API는 당장 도입이 가능하기 때문에 이를 활용해서 개발하면 차후에 업데이트하기 쉽겠다는 생각이 들었습니다.

Vue2에서 Vue3로 바로 가려면 많은 수정사항이 발생하지만 중간 단계를 걸치고 가면 좀 더 수월하니까요.

Composition API 장점과 단점

Vuejs 공식 홈페이지에는 Composition API 장점을 크게 4가지로 설명합니다.

• 더 나은 로직 재사용

• 더 유연한 코드 구성

• 더 나은 유형 추론

• 더 작은 번들과 더 적은 오버헤드

제가 실제로 사용하면서 느꼈던 큰 장점은 1번과 2번이었습니다. 타입 스크립트를 도입한다면 3번의 장점도 느낄 수 있을 거라고 생각합니다.

더 나은 로직 재사용

Composition useXX 같은 훅(hook)으로 반복되는 코드를 분리하고 재사용할 수 있습니다.

기존의 경우 유사한 성격의 컴포넌트의 코드가 반복되면 코드를 재사용하기 위해서 mixin으로 구현하고 컴포넌트에 확장하는 방식을 사용했는데요.

그러다 보면 불필요한 코드가 추가되거나 혹은 mixin 여러 개 넣는 경우 디버깅하는데 어려움이 있었습니다.

하지만 단일 책임 원칙에 따라 한 가지 책임만 가진 동작을 별도의 훅으로 분리하여 메서드를 호출하면 깔끔해지고 필요한 곳에서만 가져다 쓰면 되는 장점이 부각되었습니다.

예를 들어 기능은 거의 동일한데 일부 UI가 다른 2개의 페이지가 있다고 가정할 때 useCancellation.js 에 공통적인 부분을 작성하고 필요한 list.vue에서 필요한 메서드와 달라지는 상태 값을 넣어 분리할 수 있습니다.

useCancellation.js

export default function useCancellation(initSearchForm) {}

pages/customer/list.vue setup method

const initSearchForm = {
}

const {
  state,
  fetchList,
} = useCancellation(initSearchForm)

pages/purchase/list.vue setup method

const initSearchForm = {}

const {
  state,
  fetchList,
} = useCancellation(initSearchForm)

더 유연한 코드 구성

기존의 방식의 경우 data, methods, computed, watch, mounted 등등 항목을 옵션으로 선언했습니다.

그러디보니 코드가 전체적으로 길어질 수밖에 없고 코드를 이해하려면 지속적으로 위/아래로 스크롤 하면서 파악해야 하는 단점도 있습니다.

하지만 Composition API로 변경되면 setup에 있기 때문에 코드 전체가 덜 늘어지게 됩니다.

그리고 필요할 때 useRouter, useStore 훅을 활용하여 필요한 시점에 꺼내 쓸 수 있어 불필요한 의존성이 필요 없게 됩니다.

또한 기존에는 methods로 선언한 것 중 일부는 template에서 사용하지 않고 있음에도 다른 곳에서 this로 접근하기 위해서 구현했는데 Compostion API의 setup 마지막에 return 값으로 template에서 접근 가능한 값과 메서드를 선별할 수 있다는 장점이 있습니다.

Vue2에는 props와 state를 구분하기 어려웠으나 Compostion API를 사용하면 setup에서 props를 받아 사용하고 필요한 state 값을 상수로 선언하여 구분할 수 있습니다.

예를 들어 아래처럼 props로 data를 받고 내부에서 사용하는 상태 값을 state로 선언한다면

export default {
  props: {
    data: {
      type: Object,
      default: null,
    },
  },
  setup(props, context) {
    const state = reactive({
      reasonCode: 'ETC',
      reason: '',
    })
    
  return { state }
  }
}

템플릿에서 다음과 같이 접근해서 사용할 수 있어 state, props 구분이 가능합니다.

{{ data.cancellationAdditionalInfo }}

<CheckRadio
  v-model="state.reasonCode" />

가장 큰 단점은 Trade-offs에서 말하고 있는 코드 구성 더 나쁘게 보인다는 점인데 이는 전체 옵션으로 흩여져 있던 코드가 setup 한곳에 모여 있게 되면서 발생하는 이슈라고 보입니다.

setup()에서 아래처럼 onMounted, computed, 함수가 섞이게 되어 이전보다 구분이 안된다는 느낌을 받을 수 있습니다. 기존에 자바스크립트 코드를 작성했을 때처럼 적절하게 분리하고 구성하면 크게 복잡하지 않다고 느껴집니다. 처음엔 익숙하지 않아 낯설었는데 작성하다 보니 오히려 한곳만 봐서 편하게 느껴졌습니다.

setup method

   const showModal = computed({
      get() {
        return props.value
      },
      set(value) {
        context.emit('input', value)
      },
    })


    const handlerCloseModal = () => {
    }
    

   onMounted(async () => {
   })

결론

Vue3가 공식적으로 기본이 되었고 아직은 징검다리인 시기지만 Vue2를 구성하고 있다면 Composition API를 미리 사용해서 Vue3감을 익히는 게 좋다는 생각이 들었습니다. 실제로 사용해 보니 장점을 확실하게 느낄 수 있었습니다.

얼마 전에 Nuxt3.0로 릴리스되었고 곧 Vue3가 주가 될 것으로 생각됩니다.

읽어주셔서 감사합니다.