Option API & Composition API

https://ko.vuejs.org/guide/introduction.html#api-styles

Vue.js

 

Vue의 컴포넌트는 두 가지 작성 방식이 있다.

Option API 그리고 Composition API

 

우선 Option API에 대해서 알아보자

 

Option API

data, methods, mounted 와 같은 객체를 사용해 컴포넌트의 로직을 정의합니다.

예시(공식 페이지 내)는 아래와 같습니다.

<script>
export default {
  // data()에서 반환된 속성들은 반응적인 상태가 되어
  // `this`에 노출됩니다.
  data() {
    return {
      count: 0
    }
  },

  // methods는 속성 값을 변경하고 업데이트 할 수 있는 함수.
  // 템플릿 내에서 이벤트 헨들러로 바인딩 될 수 있음.
  methods: {
    increment() {
      this.count++
    }
  },

  // 생명주기 훅(Lifecycle hooks)은 컴포넌트 생명주기의
  // 여러 단계에서 호출됩니다.
  // 이 함수는 컴포넌트가 마운트 된 후 호출됩니다.
  mounted() {
    console.log(`숫자 세기의 초기값은 ${ this.count } 입니다.`)
  }
}
</script>

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>

 

data에서 컴포넌트가 사용할 속성들을 정의하고 this를 통해 호출 될 수 있습니다.

methods에서는 속성들을 컨트롤 할 수 있는 함수를 정의 합니다.

mounted는 컴포넌트가 마운트 된 후 호출되는 함수입니다.

 

다음은 Composition API입니다.

 

Composition API

import 하여 가져온 API 함수들을 사용하여 컴포넌트의 로직을 정의합니다.

SFC(Single-File Components)에서 Composition API는 일반적으로 <script setup> 과 함께 사용됩니다.

<setup> 속성은 Vue가 더 적은 코드 문맥으로 Composition API를 사용하고, 컴파일 시 의도한 대로 동작 할 수 있게끔 합니다.

 

<script setup> 에 import 되어 가져온 객체들과 선언된 최상위 변수 및 함수는 <template>에서 직접 사용 할 수 있습니다.

 

예시(공식 페이지 내)는 아래와 같습니다.

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

// 반응적인 상태의 속성
const count = ref(0)

// 속성 값을 변경하고 업데이트 할 수 있는 함수.
function increment() {
  count.value++
}

// 생명 주기 훅
onMounted(() => {
  console.log(`숫자 세기의 초기값은 ${ count.value } 입니다.`)
})
</script>

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>

 

변수 정의 및 호출의 차이점

Option API:

• 변수는 data 옵션 내에서 정의되며, Vue 인스턴스의 반응적 속성으로 만들어집니다.
• 이 변수들은 컴포넌트 내에서 this 키워드를 사용하여 접근할 수 있습니다.

Composition API:

• 변수는 ref 또는 reactive 함수를 사용하여 정의됩니다. 이들은 각각 단일 값 또는 반응형 객체를 생성합니다.
• Composition API에서는 this를 사용하지 않고, 직접적인 변수 참조를 통해 접근합니다.

함수(메소드) 선언의 차이점

Option API:

• 함수는 methods 옵션 내에서 정의되며, 컴포넌트의 메소드로 사용됩니다.
• 이 메소드들은 this를 통해 다른 데이터 또는 메소드에 접근할 수 있습니다.

Composition API:

• 함수는 일반 JavaScript 함수로 선언되며, 필요한 로직을 포함합니다.
• 이 함수들은 <script setup> 내에서 직접 선언되며, 다른 반응형 참조나 함수에 직접 접근할 수 있습니다.

mounted의 차이점

Option API:

• mounted는 컴포넌트의 생명주기 훅으로, 컴포넌트가 DOM에 마운트된 직후에 실행됩니다.
• 이는 객체 기반 구조 내에서 정의되며, this를 사용하여 컴포넌트의 데이터 및 메소드에 접근합니다.

Composition API:

• onMounted 함수를 사용하여 동일한 생명주기 단계를 핸들링합니다.
• 이 함수는 <script setup> 내에서 직접 호출되며, 다른 반응형 참조 및 함수에 직접 접근할 수 있습니다.

Option API와 Composition API의 차이점

Vue에서 제공하는 두 가지 주요 API 스타일인 Option API와 Composition API는 각각 고유의 특징과 사용 방법을 가지고 있습니다.

Option API

• data, methods, computed 등의 옵션을 사용하여 컴포넌트의 로직을 객체 기반으로 구성합니다.
• 컴포넌트의 각 옵션은 Vue 인스턴스에 의해 자동으로 처리되며, 이는 코드의 가독성을 높입니다.
• 초보자에게 친숙하고 접근하기 쉬운 구조를 제공합니다.

Composition API

• ref, reactive, computed, watch 등의 함수를 사용하여 컴포넌트의 로직을 구성합니다.
• 보다 선언적이고 모듈화된 코드 작성이 가능하여, 대규모 애플리케이션에서 유용합니다.
• 코드의 재사용성과 테스트 용이성이 향상됩니다.

Option API와 Composition API의 장단점

Option API

• 장점: 간결하고 명확한 구조로, 새로운 사용자나 작은 프로젝트에 적합합니다.
• 단점: 컴포넌트가 커질수록 관련 로직이 분산되어 코드의 유지 관리가 어려워질 수 있습니다.

Composition API

• 장점: 로직의 재사용과 조직화가 용이하여 복잡한 애플리케이션에 적합합니다.
• 단점: 새로운 개념과 패턴을 학습해야 하며, 초보자에게는 다소 어려울 수 있습니다.