Composition API

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

Composition API는 성격에 따라 반응형 API(Reactivity API), 라이프 사이클 훅(Lifecycle Hooks), 종속성 주입(Dependency Injection) API로 구분된다.

반응하는 데이터와 관련된 API 세트이다.

예를 들어 ref(), isRef(), reactive()와 같은 API를 사용하여 reactive state(반응 상태), computed state(계산된 상태), watchers(감시자)와 같은 것들을 만들 수 있다.

⬇️⬇️⬇️ 실행결과 ⬇️⬇️⬇️

이와 같이 반응형 메시지 아래의 버튼을 눌렀을 경우에는 값이 바뀌는 것을 볼 수 있지만, 일반 메시지 아래의 버튼을 눌렀을 때는 값이 바뀌지 않는 것을 볼 수 있다.

이렇게 반응형 API는 반응형 데이터를 선언하거나 아니면 그와 관련된 일을 하는 API이다.

이와 관련하여 반응형 데이터인지 확인할 수 있는 함수가 있는데, 그것이 바로 isRef()이다.

위의 코드에서 각각 message1과 message2가 반응형 데이터인지 확인하기 위하여 아래의 코드를 추가한다.

이에 대한 결과로써, 아래와 같은 결과가 나오게 된다.

⬇️⬇️⬇️ 실행결과 ⬇️⬇️⬇️

따라서, message1은 true로 반응형 데이터를 의미하고, message2는 false로 반응형 데이터가 아니라는 것을 알 수 있다.

Vue 인스턴스나 컴포넌트가 생성될 때, 미리 사전에 정의된 몇 단계의 과정을 거치게 되는데 이를 라이프사이클(Lifecycle)이라고 한다.

예를 들어 onMounted(), onUnmounted()와 같은 API를 사용하여 프로그래밍 방식으로 컴포넌트 라이프 사이클에 접근할 수 있고,

라이프사이클 특정 시점에 이러한 함수로 코드를 삽입할 수 있다.

⬇️⬇️⬇️ 실행결과 ⬇️⬇️⬇️

분명 코드상에서는 setup, onMounted, onBeforeMount 순서로 로그를 찍도록 코드를 작성하였지만,

콘솔 결과를 보면 라이프 사이클(Lifecycle)에 의해 setup()함수가 먼저 호출이 되고, 그 다음은 onBeforeMount가 호출이되고, 마지막으로 onMounted가 호출이 되는 것을 알 수 있다.

예를 들어 provide()와 inject()는 Reactivity API를 사용하는 동안 Vue의 의존성 주입 시스템을 활용할 수 있게 해준다.

티스토리툴바