Vue에서 composition API란? (1)

Vue.js는 현재 가장 인기있는 프론트엔드 자바스크립트 프레임워크 중 하나입니다. Vue.js는 가볍고 높은 성능을 자랑하며, 사용이 쉽고 이해하기 쉽습니다. Vue 3.0부터는 새로운 Composition API가 도입되었습니다. Composition API는 Vue.js의 기능을 확장하고 코드를 더욱 구성 가능하게 만들어줍니다. 이번 글에서는 Vue.js의 Composition API에 대해 알아보겠습니다.

Composition API란?

Composition API는 Vue.js의 새로운 기능 중 하나입니다. Vue.js의 기존 Options API에 비해 더 많은 기능을 제공하며 코드를 더욱 구성 가능하게 만들어줍니다. Composition API를 사용하면 코드를 좀 더 구조화하고 재사용성을 높일 수 있습니다. 또한, 코드의 가독성을 높이고 유지 보수를 쉽게 할 수 있습니다.

Setup()

Composition API를 사용하면 setup이라는 함수를 사용하여 컴포넌트를 초기화하고, 컴포넌트의 데이터와 메서드를 설정할 수 있습니다. setup 함수는 컴포넌트 로직을 작성하는 데 사용되며, 컴포넌트의 초기화와 데이터/메서드 설정이 필요할 때 호출됩니다.
Options API와 달리 내부의 data에 접근할 때 this 키워드를 사용하지 않도록 주의해야 합니다.

<template>
  <h1>{{ name }}</h1>
  <button @click="placeOrder">주문</button>
</template>

<script>
export default {
  setup() {
    const name = "김밥천국";
    const placeOrder = () => {
      alert("음식 주문 완료!");
    };
    return { name, placeOrder };
  },
};
</script>

매개변수 props와 context

setup 메소드의 매개변수로 props와 context가 있습니다. props는 부모 컴포넌트에서 넘겨주는 데이터를 받을 수 있고, context는 컴포넌트의 {attrs, slots, emit} 에 접근이 가능하다.

<script>
export default {
  props: {
    name: String,
    price: Number,
  },

  setup(props, { emit }) {
    const addToCart = () => {
      emit("addToCart", props.name);
    };

    return { addToCart };
  },
};
</script>

ref()

setup 함수에서 ref 함수를 사용하여 변수를 만들고, 해당 변수의 값을 추적할 수 있습니다. 이를 통해, 변수의 변경을 감지하고, 자동으로 UI를 업데이트할 수 있습니다.

import { ref } from "vue";
// ... 생략
  setup() {
    const name = ref("The Snazzy Burger");

Ref는 뷰 개발자 툴에서도 확인 할 수 있듯이 Vue에서 관리를 하고 동적으로 바뀔 수 있는 상태 값입니다. 브라우저의 콘솔에 로그를 찍어보면 다음과 같이 나오는 것을 알 수 있습니다.

위와 같은 객체로 구성이 되어 있습니다. 디테일한 것은 저도 잘 모릅니다만 회색으로 된 value를 보면 데이터가 있는 것을 볼 수 있습니다. 실제로 값만 변경하거나 사용하기 위해서는 name.value 와 같이 getter setter 함수를 호출해야합니다.

const name = ref("The Snazzy Burger");
name.value = "바꿀 수 있다!";

• v-model에 그냥 .value가 아닌 변수명만 전달하는 이유는 뷰가 자동으로 처리하기 때문.
• ref는 항상 const로 사용해서 실수로 바꾸지 않도록 주의하자. reactivity를 잃게 됨.

reactive()

배열이나 객체 리터럴은 reactive를 사용할 수 있습니다. 원시 자료형은 사용할 수 없습니다.

import { reactive } from "vue";
const meal = reactive({
  name: "Bento 🍱",
  price: 9.99,
});

ref와 다르게 value 값에 접근할 필요 없이 객체 속성 값을 바꿔줄 수 있습니다. 하지만 재할당은 할 수 없으니 주의해야합니다.