Vue - Options API, Composition API

Vue

Vue는 웹 사용자 인터페이스를 만들기 위한 쉽고 강력하며 다재다능한 프레임워크이고, 잘 알려진 장점으로는 접근성 & 낮은 러닝커브라는 점이고, 준수한 퍼포먼스를 보여주기에 많이 사용된다.

 

1. 프레임워크를 제공 (라이브러리의 집합체) 통제권이 프레임워크 자체에 있어 자유도는 낮을지 몰라도 협업에 약속된 기능을 사용하기에 코드가 명시적임
2. SPA 구조 : 하나의 페이지로 이루어져있어 유저가 원하는 정보만을 보여주는 방식
3. SFC 구조 : 하나의 컴포넌트 내에서 html, css, js가 모두 관리가 된다.

 

다른 특징들도 많지만 이에대한 정보는 아래글을 참고하자.

2025.06.24 - [코딩/Vue] - Vue와 React의 차이

Vue와 React의 차이

 

2022년 1월부터 본격적으로 Vue는 2에서 3버전으로 디폴트 버전으로 변경하면서 Vue 컴포넌트 작성하는 방식에도 변화를 가져왔다.

 

바로, Options API에서 Composition API를 사용하게 되었고, Vue2에선 Composiiton API 사용이 불가하지만, 3에선 여전히 OptionsAPI가 사용이 가능하다.

 

Options API와 Composition API 방식의 큰 차이점들을 알아보고 본격적인 Vue3, Composition API에 집중해 공부를 시작해보자

 

 

Options API

옵션 API에서는  data , methods, mounted와 같은 옵션 객체를 사용하여 컴포넌트의 로직을 정의한다.

 

1. data : 해당 컴포넌트에서 사용될 state 즉 데이터를 관리함
2. methods : 속성값을 변경하고 업데이트 할 수 있는 함수이고 템플릿 내 이벤트 핸들러로 바인딩이 가능함
3. LifeCycle : 컴포넌트 생명주기의 여러 단계에서 호출

 

이렇게 정의된 속성들은 함수 내부에서 this로 노출되며, 이는 컴포넌트 인스턴스를 가리키기에 this를 통해 data나 methods에 접근이 가능하다.

 

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

  // methods는 상태를 변경하고 업데이트를 트리거하는 함수입니다.
  // 템플릿에서 이벤트 핸들러로 바인딩할 수 있습니다.
  methods: {
    increment() {
      this.count++
    }
  },

  // 라이프사이클 훅은 컴포넌트의 생명주기
  // 각 단계에서 호출됩니다.
  // 이 함수는 컴포넌트가 마운트될 때 호출됩니다.
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

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

 

또한 Options API의 경우 TypeScript가 가능은하나 한계가 있다. this 기반 구조이기에 정확한 타입 추론이 어렵거나 불안정하다는 특징이 있다.

 

this에 메소드, 데이터 등이 혼합되기에 타입추론의 어려움이 있다.

 

또한 Composition API에 비해 입문자에게는 더 쉽다는 장점이 있다는데 리액트 혹은 Next를 개발하다 배우는 내 주변사람들의 말을 빌리자면 오히려 Composition API가 더 쉽다는 의견이 많았다.

 

Options API, Life Cycle

 

크게 Vue에서 라이프 사이클은 다음과 같은 일련의 과정을 거친다.

 

1. 컴포넌트 생성
   1. 각각의 Vue 컴포넌트 인스턴스를 생성될 때 일련의 초기화 과정을 가지고, 컴포넌트가 생성, 소멸되기까지의 단계를 의미하고 각 단계에서 실행되는 함수들을 라이프사이클 훅이라고 부름
2. Created
   1. 템플릿 및 Virtual Dom이 마운팅, 혹은 렌더링 되기 전에 실행되고, 데이터와 이벤트가 활성화 되어 접근가능
   2. data, method 접근가능
3. Mounted
   1. 컴포넌트 초기 렌더링 및 DOM 노드 생성이 완료된 후 코드실행하는데 사용 가능
   2. SFC 구조에서 템플릿 구조가 그려진 후 코드를 실행 (화면요소 제어 단계)
4. Updated
   1. 컴포넌트 데이터가 변경되어 DOM이 렌더링된 후 실행됨 Property가 변경된 후 DOM에 접근 해야할 때 사용

 

 상세한 라이프 사이클 단계들과 내용은 아래와 같다.

• beforeCreate : data, methods 등 초기 옵션 접근 불가능 (this도 완전히 초기화 전)
  • 이후, 초기화 과정(data, method를 this로 접근할 수 있게끔 함)을 거치고
• created : data, methods 등 this로 접근 가능 / 아직 DOM에는 접근 불가
• beforeMount : 가상 DOM 생성은 완료됐지만 아직 실제 DOM에는 붙지 않음
  • 컴파일된 템플릿이 있는 경우엔 초기 렌더링(DOM 노드 생성 및 삽입)을 시작하고, 없다면 템플릿을 컴파일 한다.
• mounted: 실제 DOM에 mount 완료 → DOM 조작 가능 (ex: document.querySelector)
• beforeUpdate : 반응형 데이터 변경 시 DOM 업데이트 직전 호출
• updated : 반응형 데이터 변경 시 DOM 업데이트 직전 호출
• beforeUnmount : 마운트 제거 전에 실행되어야 하는 코드의 경우 에서(정리작업용)
• unmounted : 컴포넌트가 DOM에서 완전히 제거 이후에 호출

 

---

 

Composition API, Life Cycle

 

Composition API는 위에서 언급한 것처럼 Vue3부터 도입이 되었다.

 

data, methods, mounted와 같이 기능적으로 구조한 Options와는 달리 반응형 데이터의 경우 ref, reactive로 내부 데이터를 관리한다.

 

TypeScript도입이 힘들었던 Options와 다르게 친화적으로 작동하기에 TypeScript를 사용해 코드 작성이 가능하다.

 

<script setup>
import { ref } from 'vue';

const count = ref(0);
const increment = () => {
  count.value++;
};
</script>

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

 

Options 보다는 Composition의 구조가 React와 닮아 있다고 생각이든다.

 

Composition API의 라이프 사이클 단계로는 setup() 함수 내부에서 Vue가 제공하는 라이프사이클 훅을 사용하곤 한다.

 

setup()함수의 경우 컴포넌트가 생성되기 전에 시작하기에 이 함수를 중심으로 라이프 사이클이 진행된다.

 

• onBeforeMount : Mount 이전 실행, DOM 생성되기 전의 상황
• onMounted: 실제 DOM에 mount 완료 → DOM 조작 가능 (ex: document.querySelector)
• onBeforeUpdate : 반응형 상태 변경 직후 실행, DOM 업데이트 직전 호출
• onUpdated : 반응형 데이터 변경 된 것을 관찰이 가능하고 DOM 업데이트 완료 후 호출된다.
• onBeforeUnmount : 마운트 제거 전에 실행되어야 하는 코드의 경우 에서(정리작업용)
• onUnmounted : 컴포넌트가 DOM에서 완전히 제거 이후에 호출

 

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

const message = ref('Hello, Vue 3!');

onMounted(() => {
  console.log('컴포넌트가 마운트됨');
});

onBeforeUnmount(() => {
  console.log('컴포넌트가 곧 언마운트됨');
});
</script>

<template>
  <p>{{ message }}</p>
</template>

 

현재 message의 경우 ref로 선언되고 초기화 된 반응형 상태이며 p태그 내부 message에 바인딩 되어 가상 DOM이 생성된다.

 

DOM이 마운트 되며,  컴포넌트가 마운트됨이 콘솔창에 한 번 출력된다.(onMounted 코드의 실행)

 

화면에는 Hello Vue 3!가 보이게된다.

 

이후 DOM이 제거되는 경우, 컴포넌트가 곧 언마운트됨 이 출력된다.

 

 

참고

https://ko.vuejs.org/guide/introduction.html#which-to-chose

Vue.js

https://www.youtube.com/watch?v=m2j_Y245xew&t=61s