Vue 3 Composition API: 간결하고 효율적인 상태 관리

Vue 3에서 소개된 Composition API는 컴포넌트 로직을 보다 간결하게 작성하고 재사용하기 위한 강력한 도구다. 이 글에서는 실제로 사용된 코드를 통해 Composition API의 핵심 원리를 살펴보겠다.

핵심 개념
1. ref 함수

import { ref } from 'vue';

const myVar = ref(0);

ref 함수는 반응적인(reactive) 데이터를 생성한다. 이렇게 생성된 변수는 변경되면 자동으로 화면을 업데이트한다. myVar.value로 현재 값을 얻을 수 있다.

 

 

 

2. reactive 함수, computed 함수, watch 함

import { reactive } from 'vue';

const myObject = reactive({ prop: 'value' });

import { computed } from 'vue';

const double = computed(() => myVar.value * 2);


import { watch } from 'vue';

watch(() => myVar.value, (newValue, oldValue) => {
  console.log(`myVar changed from ${oldValue} to ${newValue}`);
});

 

reactive 함수는 객체를 반응적으로 만들어준다. 객체의 속성이 변경되면 화면이 자동으로 갱신된다. 
computed 함수는 계산된 값을 만들어준다. 종속성을 추적하여 해당 값이 변경될 때까지 다시 계산하지 않는다.

watch 함수는 데이터의 변화를 감지하고 그에 따른 동작을 수행할 수 있도록 한다.

옵션 api 에서는 구조적으로 있었으나 import 선언으로 쓸 수 있게 변경이 되었다.

3. 비동기 작업과 onMounted

const adminCategoriesListInit = async () => {
  loadCategories();
};

onMounted(adminCategoriesListInit);

 

onMounted는 컴포넌트가 마운트된 후 실행되는 라이프사이클 훅입니다. 비동기 작업을 수행하는 함수를 호출하여 초기 데이터를 가져올 수 있다. 모든 라이프 사이클 에는 on 이 붙는다.

 

4. setup 함수

setup() {
  // 초기 설정 및 로직 작성
  return { myVar, double };
}

 

setup 함수는 컴포넌트의 초기 설정을 담당하며, 여기서 리액티브 데이터, 메소드, 훅 등을 반환한다.

 

 

Vue 3 Composition API는 코드를 보다 모듈화하고 가독성 있게 작성할 수 있는 강력한 기능을 제공한다. 이를 통해 개발자는 더 효율적으로 코드를 작성하고 유지보수할 수 있다. 기존 옵션 api 는 다르게 구조는 파악이 힘들지만 더 간결한 코드로 작성이 가능하다.