Vue Composition API

Composition API 는 컴포넌트 코드 재사용성을 높여주는 API 입니다.
흔히들, Vue3 에서 사용하는 줄 알지만, 시작은 Vue2 에서 플러그인 형태로 지원하였습니다.
그렇기 때문에 Vue2, Vue3 에서 둘 다 사용가능합니다.

라이브러리 설치

이제 vue2 를 쓰는데, Composition API 가 쓰고 싶은 경우, nuxt2 를 쓰는데 Composition API 가 쓰고 싶은 경우 아래의 github 를 참고해서 설치해봅시다.

https://github.com/vuejs/composition-api

GitHub - vuejs/composition-api: Composition API plugin for Vue 2

https://github.com/nuxt-community/composition-api

GitHub - nuxt-community/composition-api: Composition API hooks for Nuxt 2.

왜?? option 에서 Composition API 로 변경되었는가?

정확히 말하자면, 변경된게 아니라 공생하는 관계가 되었습니다.
Vue 는 기존의 option 방식과 Composition 을 같이 사용할 수 있도록 개발되었으며, 기존 Vue의 도입시 Composition 을 이용해서 서서히 변경할 수 있도록 길을 열어주었습니다.
하지만, 스파게티 소스가 될 우려가 있기 때문에 주의할 필요는 있습니다.

아니 그러면 Composition이 있으면 Vue, React 의 차이점은 뭐냐?

이 둘은 근본적인 코어의 차이가 있습니다.
vue는 reactive 반응성을 기반으로 데이터가 변하면 화면을 변환시키는 방법이며, React 는 state 가 변할시 전체 컴포넌트를 리렌더링합니다. 그러기 때문에 성능 개선을 위해 React에는 useMemo, useCallback 이 존재하는 것입니다.

Composition api 의 단점은 없냐?

모든 기술이 그렇듯 새로운 기술이 나오면 러닝커브가 생기기 마련입니다.
기존의 option 을 사용했던 사람들은 어느정도 러닝커브가 있을 수 있지만, React 를 같이 했던 사람은 오히려 더 편하다고
느낄 수 있을 것 입니다.

Composition 시작

Vue의 option 기반의 코드는 아래와 같습니다.

<template>
  <div>
    <p>{{ msg }}</p>
    <button @click="changeMsg">버튼</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'hi world'
    }
  },
  methods: {
    changeMessage() {
      this.msg = 'hello world'
    }
  }
}
</script>

이 코드를 Composition 으로 변경하면 아래와 같습니다.

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMsg">버튼</button>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    // data
    const message = ref("hello world");

    // methods
    const changeMsg = () => {
      message.value = "hi world";
    };

    // 밖에서 쓸라면 return 을 해주어야함. 매우 중요.
    return {
      message,
      changeMessage,
    };
  },
};
</script>

<style lang="scss" scoped></style>

가장 큰 차이는 setup 이라는 api 가 생겼고 그 안에 ref 라는 composition api 를 이용해 reactive 데이터를 선언합니다.

setup 은 뭐냐?

setup 은 Composition api 를 사용하기 위해 꼭 선언해주어야 하는 옵션입니다. 이 안에서 우리가 option 에서 사용한 모든 기능들을 사용할 수 있습니다.
또한, setup 은 api 기반으로 재사용성을 극대화할 수 있습니다. 각 함수를 모듈화하여 가지고 있다가 사용하고 싶을 때 마다 사용가능합니다.

// hooks/useMsg.js
import { ref } from "vue";

function useMsg() {
  // data
  const msg = ref("hello world");

  // methods
  const changeMsg = () => {
    // setup 안에서 ref 를 변경할라면, .value 를 써줘야함.
    msg.value = "hi world";
  };

  return {
    msg,
    changeMsg,
  };
}

export { useMsg };

<template>
  <div>
    <p>{{ msg }}</p>
    <button @click="changeMsg">버튼</button>
  </div>
</template>

<script>
import { useMsg } from "./hooks/useMessage";

export default {
  setup() {
    const { msg, changeMsg } = useMsg();

    return {
      msg,
      changeMsg,
    };
  },
};
</script>

<style lang="scss" scoped></style>