Vue-Composition API

Vue-Composition API

 

 

Vue에서는 Option API방식으로 데이터 또는 함수를 관리하거나 Composition API방식을 사용하거나 둘 중 하나를 사용하여 개발한다.

 

 

Option API방식은 뜻 그대로 Vue에서 제공하는 옵션 하나하나를 이용하여 개발한다. 예를 들어 data(), methods, computed와 같은 것처럼 말이다.

 

 

반대로 Composition은 setup()이라는 것 안에 모든 것을 정의해서 사용한다. 

 

 

그럼 왜 Composition API를 사용할까?

 

 

작은 프로젝트의 경우 Option API방법으로 진행했을 때 상관이 없다. 

하지만 조금 규모가 커졌을 때는 데이터의 이동추적을 하려면 일일히 찾아야하며 많은 데이터와 많은 함수가 있기 떄문에 스크롤도 많이해야하는 번거로움이 생긴다.

우리는 이 때 Composition을 하면 데이터추적이 용이해진다.

 

 

export default {
	setup() {
    	let age ="10";
        let name ="minsu";
    };
    
    return {age, name};
}

 

 

 

여기서 중요한 점은 let age ="10";에서 age는 반응형이 아닌 상태이다. 즉 숫자를 바꾸면 바로바로 반응해서 홈페이지에 적용이 안된다. 그렇기 위해서 우리는 "ref"나 "reactive"를 사용한다.

 

ref VS reactive

 

 

ref는 String이나 Number와 같은 원시타입도 반응형으로 받을 수 있다.

reactive는 원시타입은 반응형으로 하지 못하기 떄문에 보통 Array나 Object형식만 받을 수 있다.

 

 

그래서 이왕이면 ref로 통일하는 게 관례적으로 좋다고 볼 수 있다.

 

 

그럼 이제 사용법을 알아보자.

 

 

import { ref } from "vue";

export default {
  name: "HOME",
  setup() {
    const person = ref({ name: "jisu", age: 25 });

    const Click = () => {
      person.value.age = 30;
    };
     return { person, handleClick };
  }
};

 

 

먼저 vue라이브러리로부터 ref를 가져온 후 setup을 똑같이 정의해준다. 

ref에다가 값을 저장해놨기 때문에 value라는 속성을 한번 거치고 실제속성에 접근해야한다.

 

 

person.age가 아닌 person.value.age처럼 말이다.

 

 

그렇다면 우리는 반응형으로 데이터를 관리할 수 있다.