[Vue] Composition API

Vue2와 Vue3의 차이점을 정리하던 중 제일 큰 차이점인 Composition API는 따로 정리해야 할 것 같아 글을 작성하게 되었다.

---

1. Composition API란?

Composition API는 함수 기반의 API로, 컴포넌트 내에서 사용하는 코드를 유연하게 구성할 수 있게 하고 코드의 가독성을 높인다.

게다가 반복되는 코드를 별도의 hooks로 모듈화하고 컴포넌트 내에서 import하여 사용할 수 있기 때문에 코드의 재사용성 측면에서도 유용하다.

 

(1) setup()

setup 메서드는 컴포넌트가 생성되기 전(created 이전)에 props를 인식하면 실행되는 옵션이다.

인자는 props, context(attrs, slots, emit, parent, root)를 받는다.

 

(1-1) data

vue3에서는 data를 아래와 같이 정의한다.

javascript에서 변수/상수를 선언하는 형태와 비슷하다.

<script setup>
	let age = 23;
</script>

 

 

(1-2) 반응형 데이터

반응형 데이터들은 ref나 reactive를 사용하여 정의할 수 있다.

반응형 데이터는 값의 변경을 감지하고 해당 값에 종속된 작업(side effect)을 수행한다.

 

아래는 ref를 이용한 방식이고

const infomation = ref({ name: "kimBoolean", age: 23 });
// 값 변경 시
infomation.value.age = 100;

 

아래는 reactive를 이용한 방식이다.

const infomation = reactive({ name: "kimBoolean", age: 23 });
// 값 변경 시
infomation.age = 100;

 

그렇다면 이 둘의 차이점은 무엇일까?

ref
- ref는 원시타입 값을 포함한 다양한 type을 반응형으로 반영한다.
- 단, 객체의 경우 깊은 감지가 불가하다는 단점이 있다.
- 원본 값의 접근 및 변경은 ref.value로 조작해야 한다.

reactive
- reactive는 객체만을 인자로 받아 반응형을 반영하며 깊은 감지가 가능하다.

 

즉 ref는 type의 제한이 없다! reactive는 객체일 경우! 사용하기 좋다는 것이다.

 

(1-3) props

props의 경우, Vue2와 달라진 점은 defineProps로 받은 props를 정의한다는 것이다.

const props = defineProps(['title']);

console.log(props.title);

 

(1-4) computed()

computed는 메소드를 import하여 함수 형태로 계산된 반환값을 작성해주면 된다.

const filterList = computed(() => lists.filter(list => list.isFocus));

 

(1-5) watch

watch 역시 메소드를 import하여 인자로 감시할 데이터, 조작할 로직, 옵션 등을 받는다.

Vue2와 동일하게 deep, immediate와 같은 옵션 사용이 가능하다.

watch(list, (newVal, oldVal) => {
	...
}, {immediate: true})

 

 

(2) 유연한 코드 구성

처음에는 Composition API가 왜 코드 가독성이 좋다는건지 이해가 가지 않았다.

Vue2의 구조에 익숙해져있었기에 watch는 watch끼리 묶여있는 게 더 보기 쉽다고 생각했기 때문이다.

 

그러나 사용해보니 관련 있는 로직끼리 묶어서 볼 수 있다는 점에서 유연한 코드 구성과 더불어 코드 가독성이 향상되는 것 같다.

 

전반적으로 setup 안에 합쳐졌다는 점과 변수/상수 선언 방식과 비슷하게 선언한다는 점,

ref, reactive의 차이점에 대해 제대로 알고 있으면 좋을 것 같다.