Vue.js 생명주기 훅: Options API와 Composition API 비교

 

Vue.js는 다양한 방식으로 컴포넌트를 작성할 수 있는 유연성을 제공합니다. 주요 개발 스타일로는 Options API와 Composition API가 있습니다. 이 글에서는 두 가지 스타일에서 생명주기 훅을 사용하는 방법을 비교하고, 각각의 예제를 살펴보겠습니다.

Options API란?

Options API는 Vue.js의 기존 방식으로, 컴포넌트를 구성하는 여러 옵션(properties, methods, computed, watch 등)을 객체 형태로 정의합니다. Vue 2.x 버전부터 사용되어 온 방식으로, 기존 Vue 개발자들에게 익숙한 스타일입니다.

Composition API란?

Composition API는 Vue 3에서 도입된 새로운 방식으로, 함수형 프로그래밍의 장점을 활용합니다. 이를 통해 컴포넌트 로직을 정의하며, 재사용성과 코드 구조의 명확성을 높입니다. setup 함수를 사용하여 컴포넌트 로직을 정의하며, Reactivity API를 통해 상태를 관리합니다.

생명주기 훅 비교

Options API에서의 생명주기 훅

Options API에서는 생명주기 훅을 컴포넌트 옵션 객체 안에 메서드로 정의합니다. 아래는 모든 생명주기 훅을 사용하는 예제입니다.

<template>
  <div>
    <p>Options API 생명주기 훅 예제</p>
  </div>
</template>

<script>
export default {
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  }
};
</script>

<style scoped>
/* 스타일 정의 */
</style>

Composition API에서의 생명주기 훅

Composition API에서는 setup 함수 내에서 생명주기 훅을 사용할 수 있습니다. Vue.js에서 제공하는 onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted 등의 함수를 import하여 사용합니다.

<template>
  <div>
    <p>Composition API 생명주기 훅 예제</p>
  </div>
</template>

<script>
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      console.log('beforeMount');
    });

    onMounted(() => {
      console.log('mounted');
    });

    onBeforeUpdate(() => {
      console.log('beforeUpdate');
    });

    onUpdated(() => {
      console.log('updated');
    });

    onBeforeUnmount(() => {
      console.log('beforeUnmount');
    });

    onUnmounted(() => {
      console.log('unmounted');
    });
  }
};
</script>

<style scoped>
/* 스타일 정의 */
</style>

 

 

비교 분석

Options API의 장점

1. 가독성: 코드가 명확하게 구분되어 있어 가독성이 높습니다.
2. 직관성: Vue 2.x와의 호환성이 높아 기존 Vue 개발자에게 익숙합니다.

Options API의 단점

1. 재사용성: 로직의 재사용이 어렵습니다.
2. 타입스크립트 지원: 타입스크립트를 사용할 수 있지만, Composition API에 비해 다소 불편할 수 있습니다.

Composition API의 장점

1. 재사용성: 훅과 같은 함수를 통해 로직을 쉽게 재사용할 수 있습니다.
2. 유지보수성: 관련 로직을 함께 그룹화할 수 있어 유지보수가 용이합니다.
3. 타입스크립트 지원: 강력한 타입 검사를 제공합니다.

Composition API의 단점

1. 가독성: 처음 접하는 개발자에게는 다소 복잡하게 보일 수 있습니다.
2. 학습 곡선: 기존 Vue 개발자에게는 새로운 API에 익숙해지기까지 시간이 필요할 수 있습니다.

결론

Vue.js는 Options API와 Composition API 두 가지 스타일을 제공하여 개발자들이 애플리케이션의 요구 사항에 따라 유연하게 선택할 수 있도록 합니다. Options API는 간단한 프로젝트나 기존 Vue 2.x 프로젝트에 적합하며, Composition API는 대규모 프로젝트나 복잡한 로직을 처리할 경우 유용합니다. 두 스타일 모두 생명주기 훅을 통해 컴포넌트의 특정 시점에 원하는 로직을 실행할 수 있어, 애플리케이션의 복잡한 상태 관리와 효율적인 리소스 관리를 가능하게 합니다.

---