📆 23.03.01 - Vue 3 Composition API와 Option API

Vue 3가 정식화가 되었습니다.
이 포스팅은 Vue 3에서 정식으로 나오게 된 Composition API 를 다루기 때문에 이해가 어려우신 분들은 이전 포스팅 📆 23.02.10 - Vue 3..! 이전 버전과는 무엇이 달라졌을까 을 보고 와주세요.

Vue 3에서 고를 수 있는 2가지 전직

Vue 2에서도 plugin을 활용하여 고를 수 있었던 2가지 코드 작성 방식 Composition API와 Option API.
이번에 Vue 3가 정식화 되면서 기존 얼리얼 단계에서의 내용보다 더 많은 부분이 Composition API 문법으로 생성이 된 것을 확인할 수가 있다.
이번 포스트는 Compostion API와 Option API가 어떠한 형식의 구조로 이루어져있는지 정리하고 서로의 이점 및 어떠한 경우에 어떤 걸로 작성해야 하는지를 다루려고 한다.

Composition API와 Option API

Vue라는 프레임워크는 Single-File Component의 형식으로 HTML 기능의 <template>, CSS 기능의 <style> 그리고 JS의 <script> 태그안에 작성한 코드들을 추후에 컴파일 시, 각각의 파일로 파싱하여 렌더링하게 되는 구조이다.

여기서 <script> 태그에서 어떠한 형식으로 코드를 작성할 수 있는지에 따라서 Composition API와 Option API 방식으로 나뉜다.

하단의 그림은 두 방식으로 작성했을 때의 차이를 맹목적으로 보여준다.

먼저 위의 그림을 보면 두가지 코드 오른쪽의 코드들이 무언가 정갈하게 역할 군으로 정리되어 있는 것을 확인할 수 있다. Composition API 가 나오게 된 큰 이점이 바로 이 부분이다.

재사용

Composition API는 기존 Option API 의 로직 재사용 기술인 mixins의 단점을 해결하고 반응성 시스템에 쉽게 통합하기 위한 구조로 짜여져 있어 깨끗한 코드를 작성할 수 있는 프레임워크의 역할을 한다.

본격적인 타입추론

Vue 3에서는 이전보다 Typescript의 호환성이 높아졌다고 한다.

더 작은 생산 번들 및 더 적은 오버헤드

<script setup> 태그를 통하여 구성 요소의 템플릿이 코드의 동일한 범위에 인라인된 함수로 컴파일 되기에, 이전 Option API 에서 this로 접근하는 과정을 줄여주기에 변수 이름을 안전하게 단축될 수 있기 때문에 더 나은 코드를 작성할 수 있게 된다.

Option API

이 Option API 는 옵션의 객체를 활용하여 코드를 설계하게 되는데 data, methods, mounted 등이 있다. 더 자세한 설명을 위해 내가 그동안 작성했던 코드를 하단에 첨부하려고 한다. (vue3 베타 버전 때 작성한 코드라 일부 불편한 부분이 있을 수도 있습니다.)

<template>
  <!-- inactive - active 토탈 컨테이너 -->
  <div class="selectContainer__total">
    <!-- 활성화 되기 전의 컨테이너 -->
    <div
      class="selectContainer__inactive"
      @click="Active()"
      :style="{
        transition: $store.state.isActive ? '4s' : '4s',
        opacity: $store.state.isActive ? 0 : 1,
        display: $store.state.isActive ? 'none' : 'inline',
      }"> 
      <!-- 초기값 false -->
      <div class="flightContainer">
        <span>
          <h1>{{ shortDep }}</h1>
          {{ getAirport_dep }}
        </span>
        <div>
          <img
            src="./airplane2.png"
            alt="비행기"
            :style="airplane_img_inactive" />
        </div>
        <span>
          <h1>{{ shortArr }}</h1>
          {{ getAirport_arr }}
        </span>
      </div>
     
     ...
     
    </div>
  </div>
</template>

<script>
import Button from "../UI/UI/neumorphism/button/Button.vue";
import ToggleButton from "../UI/UI/neumorphism/toggle-button/ToggleButton.vue";
import Datepicker from "vue3-datepicker";
import { mapState, mapGetters, mapActions } from "vuex";
import { defineComponent, ref } from "vue";
// eslint-disable-next-line no-unused-vars
const picked = ref(new Date());
// eslint-disable-next-line no-unused-vars
import { enUS } from "date-fns/locale";
// eslint-disable-next-line no-unused-vars
import { isSameDay } from "date-fns";

export default defineComponent({
  // 데이터 저장하는 곳  {{데이터바인딩}}

  name: "Search-component",
  components: {
    ToggleButton: ToggleButton,
    Button: Button,
    Datepicker: Datepicker,
  },

  data() {
    return {
      inactiveHeight: "15rem",
      picked_from: new Date(),
      picked_to: "",
      toggle: false,
      person: [1, 0, 0],
      selectClass: "",
      openModal: false,
      btnActive: false,
      DepartureDate: "September 17th",
      ArrivalDate: "October 15th",

      airplane_img_inactive: {
        width: "30px",
        height: "30px",
        marginTop: "20px",
        marginLeft: "auto",
        marginRight: "auto",
      },

  },

  methods: {
    Active() {
      this.$store.state.isActive = true;
    },
    unActive() {
      this.$store.state.isActive = false;
    },
    reverse() {
      /* shortDep <-> shortArr */
      this.$store.state.tem_short = this.$store.state.arrival;
      this.$store.state.arrival = this.$store.state.departure;
      this.$store.state.departure = this.$store.state.tem_short;
      /* getAirport_dep <-> getAirport_arr */
      this.$store.state.tem_airport = this.$store.state.airport_arr;
      this.$store.state.airport_arr = this.$store.state.airport_dep;
      this.$store.state.airport_dep = this.$store.state.tem_airport;
      /*.depAirportId <-> arrAirportId */
      this.$store.state.tem_code = this.$store.state.arrAirportId;
      this.$store.state.arrAirportId = this.$store.state.depAirportId;
      this.$store.state.depAirportId = this.$store.state.tem_code;
      /* tem_depNm _<-> tem_arrNm */
      this.$store.state.tem_DepArrNm = this.$store.state.tem_depNm;
      this.$store.state.tem_depNm = this.$store.state.tem_arrNm;
      this.$store.state.tem_arrNm = this.$store.state.tem_DepArrNm;
    },
    // 한계치를 넘으면 버튼 잠그기
    btnIncrease() {
      if (document.querySelector("input[id=adult]:checked")) this.person[0]++;
      else if (document.querySelector("input[id=kid]:checked"))
        this.person[1]++;
      else this.person[2]++;

      /* Prevent from over 9 */
      
   ...
   
  },

  computed: {
    ...mapState(["arrival", "departure", "tem_short", "selectClass"]),
    ...mapGetters({
      shortDep: "shortDep",
      shortArr: "shortArr",
      getAirport_dep: "getAirport_dep",
      getAirport_arr: "getAirport_arr",
    }),
    ...mapActions({
      searchInfo: "searchInfo",
    }),
    /* phoneHeight() {
        return window.matchMedia('screen and (max-width: 440px)').matches ? '60vh' : '35rem'
    }, */
    activeHeight() {
      return document.getElementsByClassName("selectContainer__active").height;
    },
  },

  watch: {},
});
</script>

<style lang="scss" scoped>
@import "../UI/scss/main.scss";
...

* {
  perspective: 700px;
  user-select: none; // prevent block
}

html {
  font-size: 16px;
}

.selectContainer {
  margin: {
    top: 15px;
    
    </style>

degineComponent 라는 객체 안에서 실질적인 data를 다루는 data(), 함수를 다루는 methods, 캐싱 처리된 computed 등의 객체를 사용하여 컴포넌트 로직을 정의하게된다. 또한 vue의 라이프사이클 을 표현하는 mounted(), created() 등으로 직접적인 표현으로 사용할 수 있다.

this

또한 Option API에서의 옵션으로 정의된 속성들은 Component Instance 를 가르키는 함수 내부의 this 로 노출이 된다고 한다.

위의 methods 에서 data 객체의 값을 사용할 때도 this를 접두사로 씀으로, 꺼내서 쓰는 것을 볼 수 있다.

Composition API

Composotion API란 옵션을 선언하는 대신 가져온 함수를 사용하여 Vue를 작성하게 해주는 API 작성 기법이라고 하는데 생긴 것을 보면 React에서 작성하는 방식과 유사한 것을 볼 수 있다.

아래의 코드는 vue 공식 홈페이지에서 인용을 해왔다.

<script setup>
import { ref, onMounted } from 'vue'

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

육안으로 봤을 때 달라진 부분을 간단하게 정리해 보았을 때..

• JS 문단을 사용하는 <script> 태그가 <script setup> 태그로 변경
• 함수나 변수 등을 더 이상 객체 안에서가 아닌 리액트 컴포넌트 작성하는 것처럼 변수 타입을 지정하고 설계
• 라이프사이클 함수가 Option API 에서 사용했던 직관적인 네이밍에서 조금 벗어났으며, 각자의 라이프사이클 이름의 함수로 각각 따로따로 작성하는 모양으로 보임

하지만 정확하게 넘어가는 것이 좋으니 개발자들의 친구 공식문서를 참고하여 Composition API 의 정의를 살펴보려고 한다.

Composition API 간단 정리

옵션 선언을 하던 방식에서 함수 구성을 기반으로 하는 API 스타일로 작성하는 방식을 의미한다.
(그렇지만 Composition API는 Vue의 변경 가능하고 세분화된 반응성 패러다임을 기반으로 작성되기에 불변성을 강조하는 함수형 프로그래밍이 아니다)

• 반응성 API 가 추가되었다.ref(), reactive()를 사용하여 반응성 상태, 계산된 상태 및 감시자를 직접 생성할 수 있다.

• 라이프사이클 훅을 따로 사용할 수 있다. ex ) onMounted(), onCreated()

• 반응성 API를 사용하는 동안 Vue의 의존성 주입 시스텝을 활용할 수 있게 해주는 provide(), inject() 생성

원래 이 Composition API는 Vue 3 에서의 모델 이기에 Vue 2 유저들은 Vue 2.7로 업그레이드, 혹은 @vue/composition-api 플러그인을 설치하여 사용하면 된다고 한다.

---

그렇다면 Option API 에서 Composition API로 마이그레이션 해야하나요?

꼭 그렇다는 것은 아니라고 한다. Option API의 큰 장점은 중, 소규모의 프로젝트를 만들 때는 생각을 덜 할 수 있게되어 큰 사랑을 받는다는 점이다. 하지만, 대규모 프로젝트에서는 여러 재사용되는 로직들의 가짓수들이 늘어나기에 Composition API 를 추천한다고 한다.

따라서 우리의 프로젝트의 규모가 어떻게 될 것인지 가정하고 설계를 하는 것이 좋다

Reference : https://vuejs.org/guide/extras/composition-api-faq.html