Vue3 Composition API 개념 정리

Composition API

옵션을 선언하는 대신 가져온 함수(ref, onMounted, ...)를 사용하여  Vue 컴포넌트를 작성할 수 있는 API 세트

 

반응형 API

ref(), reactive()와 같은 API를 사용하여 reactive state, computed state, watchers와 같은 것을 만들 수 있다.

 

라이프 사이클 훅

Vue 인스턴스나 컴포넌트가 생성되면서 사전에 정의된 몇 단계의 과정을 거치게 되는데 이를 라이프사이클이라고 한다.

 

Vue 인스턴스가 생성되고, 보여지고, 사라지기까지의 단계를 말하며 인스턴스는 크게 생성(create), Dom에 부착(mount), 업데이트(update)되며 사라지는(destory) 4가지 과정을 거친다.

 

onMounted(), onUnmounted()와 같은 API를 사용하여 프로그래밍 방식으로 라이프사이클에 접근 가능하다.

 

종속성 주입

provide(), inject()는 Reactivity API(반응형 API)를 사용하는 동안  Vue의 의존성 주입 시스템을 활용 가능

---

ref()와 reactive()

 ref 메소드는 기본타입(number, string, boolean) 반응형으로 구성되어있다. 즉 변이 가능한 객체를 반환한다.

 

 reactive() 함수는 객체타입에만 동작 (readonly를 이용하여 반응형 객체의 변경 방지도 가능)

---

Computed(계산된) vs Method

메서드를 활용하면 computed와 동일한 효과를 나타내지만

computed는 결과가 캐시된다는 것이다. 그리고 computed내 반응형 데이터가 변경된 경우에만 다시 계산이 된다.

 

computed는 기본적으로 getter전용이다. 새 값을 할당하려고 하면 런타임 경고가 표시되며, 

새로운 계산된 속성이 필요한 경우 getter와 setter를 모두 제공하여 속성을 만든다.

 

---

v-for

v-for 디렉티브를 사용하여 배열인 목록을 렌더링 할 수 있다.

v-for="item in items"

배열에서 항목을 순차적으로 반환 가능하며

v-for="(item, index) in items"

 문법을 사용해 배열 인덱스를 가져올 수 있다.

 

- 항목을 나열할 때 각 :key 속성에 고유한 값을 지정해야 한다.

---

디렉티브

v-접두사가 있는 특수 속성이다. 지시를 뜻하며 컴포넌트(DOM 요소)에게 "~하게 작동해라"하고 지시를 해주는 지시문을 말한다.

 

디렉티브 종류

• v-text, v-html, v-show
• v-if, v-else, v-else-if
• v-for
• v-on(이벤트 수식어, 단축표기 @), v-bind(단축표기 :), v-model(양방향 바인딩), v-slot(단축표기 #)
• v-pre, v-once, v-cloak, v-memo

디렉티브 구성

• 디렉티브 : 디렉티브의 값(value)이 변경될때  특정 효과를 반응적으로 DOM에 적용
• 전달인자 : 콜론(:)으로 표기되는 전달인자를 가지며 v-bind 디렉티브는 반응적으로 Html 속성을 갱신하는데 사용
  • 동적 전달인자 : 대괄호를 사용하여 동적으로 삽입
• <a v-bind:[attributeName]="url">...</a>
• 수식어 : 점(.)으로 표시되는 접미사

---

v-model (양방향 바인딩)

입력 요소의 상태와 자바스크립트의 상태를 동기화해야 하는 경우가 많아 작업을 단순화하기 위한 바인딩 방법

---

Watch

어떠한 상태가 변경 되었을때 DOM을 변경하거나 비동기 작업을 해서 다른 상태를 변경하기 위해 watch 함수를 사용

 

Watch함수의 추가 옵션

• immeditae : 감시자 생성 시 즉시 콜백 트리거.
• deep : 깊은 감시자가 생성
  
  

Computed vs Watch

• computed
  • - Vue의 인스턴스 상태(ref, reactive 변수)의 종속 관계를 자동으로 세팅하고자 할때는 computed로 구현
• watch
  • - Vue의 인스턴스 상태의 변경 시점에 특정 액션(call api, push route 등)을 취하고자 할때 적합 
    
    

WatchEffect

콜백 함수 안의 반응성 데이터에 변화가 감지되면 자동으로 반응하여 실행하고 의존성을 반응적으로 추적하며

의존성이 변경될 떄마다 다시 실행한다. (WatchEffect의 코드는 컴포넌트가 생성될 때 즉시 실행된다.)

 

watch vs watchEffect

 둘 다 관련 작업(call api, push route)을 반응적으로 수행할 수 있게 한다. 차이점은 관련된 반응형 데이터를 추적하는 방식

• watch : 특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성
• watchEffect : 의존성이 있는 데이터에 대해서 즉각적으로 실행하며 함수 내부에 있는 여러 반응값을 관찰해야 할 때 사용하고 그 중 하나가 업데이트 될 때마다 반응