composition API

• 컴포넌트내에서 사용하는 특정 기능을 갖는 코드를 유연하게 구성해서 사용할 수 있는 함수 기반의 API이다.
• vue는 계층 구조가 복잡해질 수록 추적하기가 어려웠기 때문에 이 단점을 극복하기 위해 나온 것이다.
• 공통 함수를 만들어서 재사용을 극대화시킨 기능
• 믹스인의 단점을 보완

CompositionAPI.vue

<template>
  <div>
    <h2>Calculator</h2>
    <div>
      <input type="text" v-model.number="state.num1" @keyup="plusNumbers" />
      <span> + </span>
      <input type="text" v-model.number="state.num2" @keyup="plusNumbers" />
      <span> = </span>
      <span>{{ state.result }}</span>
    </div>
  </div>
</template>
<script>
import { reactive } from "vue";
export default {
  name: "calculator",
  setup() {
    let state = reactive({
      //reactive를 이용해서 num1, num2, result를 실시간 변경사항에 대한 반응형 적용
      num1: 0,
      num2: 0,
      result: 0,
    });
    function plusNumbers() {
      state.result = state.num1 + state.num2;
    }
    return {
      //reactive로 선언된 state와 plusNumbers 함수를 반환함으로써 기존 data, methods 옵션 처럼 사용이 가능해짐
      state,
      plusNumbers,
    };
  },
};
</script>

CompositionAPI2.vue

<template>
  <div>
    <h2>Calculator</h2>
    <div>
      <input type="text" v-model.number="state.num1" />
      <span> + </span>
      <input type="text" v-model.number="state.num2" />
      <span> = </span>
      <span>{{ state.result }}</span>
    </div>
  </div>
</template>
<script>
import { reactive, computed } from "vue";
export default {
  name: "calculator",
  setup() {
    let state = reactive({
      num1: 0,
      num2: 0,
      result: computed(() => state.num1 + state.num2), // computed를 이용해서 num1, num2가 변경이 일어나면 즉시 result로 더한 값을 반환
    });
    return {
      state,
    };
  },
};
</script>

• computed 사용해서 composition API를 사용할 수 있다.
• 복잡한 컴포넌트들의 코드를 추적하기 어려워지는 composition API의 경우는 setup함수를 통해 유지보수하기가 쉬워진다.

외부 function 함수 사용

CompositionAPI3.vue

<template>
  <div>
    <h2>Calculator</h2>
    <div>
      <input type="text" v-model.number="num1" />
      <span> + </span>
      <input type="text" v-model.number="num2" />
      <span> = </span>
      <span>{{ result }}</span>
    </div>
  </div>
</template>
<script>
import { reactive, computed, toRefs } from "vue"; //toRefs 추가

function plusCalculator() {
  let state = reactive({
    num1: 0,
    num2: 0,
    result: computed(() => state.num1 + state.num2),
  });

  return toRefs(state); //반응형으로 선언된 num1, num2, result가 외부 function에서 정상적으로 동작하기 위해서는 toRefs를 사용해야 함
}

export default {
  name: "calculator",
  setup() {
    let { num1, num2, result } = plusCalculator(); //외부 function

    return {
      num1,
      num2,
      result,
    };
  },
};
</script>

toRefs를 사용하여 반환해줘야 반응형으로 사용할 수 있다.

공통 컴포넌트 생성

다른 컴포넌트에서 common 파일을 import해서 사용할 수 있다.

common.js

import { reactive, computed, toRefs } from "vue"; //toRefs 추가

function plusCalculator() {
  let state = reactive({
    num1: 0,
    num2: 0,
    result: computed(() => state.num1 + state.num2),
  });

  return toRefs(state); //반응형으로 선언된 num1, num2, result가 외부 function에서 정상적으로 동작하기 위해서는 toRefs를 사용해야 함
}

export { plusCalculator };

CompositionAPI4.vue

<template>
  <div>
    <h2>Calculator</h2>
    <div>
      <input type="text" v-model="num1" />
      <span> + </span>
      <input type="text" v-model="num2" />
      <span> = </span>
      <span>{{ result }}</span>
    </div>
  </div>
</template>
<script>
import { plusCalculator } from "../common.js";

export default {
  name: "calculator",
  setup() {
    let { num1, num2, result } = plusCalculator();
    return {
      num1,
      num2,
      result,
    };
  },
};
</script>

Provide & Inject

컴포넌트가 복잡할 경우 사용하는데, composition API내에서 사용하면 자식 컴포넌트에 inject를 부모 컴포넌트에 provide를 사용한다.

CompositionAPIProvide.vue

<template>
  <CompositionAPIInject />
</template>
<script>
import { provide } from "vue";
import CompositionAPIInject from "./CompositionAPIInject.vue";
export default {
  components: { CompositionAPIInject },
  setup() {
    provide("title", "Vue.js 프로젝트");
  },
};
</script>

CompositionAPIInject.vue

<template>
  <h1>{{ title }}</h1>
</template>

<script>
import { inject } from "vue"; //inject 추가
export default {
  setup() {
    const title = inject("title"); //inject를 사용해서 provide에서 정의한 키(key)로 데이터를 전달 받음
    return { title };
  },
};
</script>