Vue3 Composition API

Composition API 란?

 Composition API는 컴포넌트 로직을 유연하게 구성할 수 있도록 하는 함수 기반 API이다. 기존에는 data, methods, computed에 로직이 분리되어 있어 데이터가 어디에서 사용되는지 파악하기 힘들었다. 컴포넌트의 계층구조가 복잡해지거나 프로젝트 규모가 커지면 추척 및 관리에 어려움이 있다.

 

 컴포지션 API는 setup() 이라는 메서드 안에 로직을 모아놓는 구조이다. 데이터가 어떻게 변화하고 사용되는지 그룹핑하여 데이터의 흐름 파악이 쉽고 유지보수에 용이하다.

 

Setup 함수

컴포넌트 객체에서 속성으로 분리되었던 기능 대부분(data, methods, computed)을 setup 함수 안에서 사용할 수 있다. 또한, setup는 beforeCreate, created 훅과 같은 라이프사이클을 가지는 일종의 훅과 같다. 반응형 데이터를 바인딩해주고 다른 함수 속성들을 정의해줄 수 있다.

 

- 라이프사이클 함수 사용하기

beforeCreate / created → setup()

나머지는 on 접두사 붙여서 사용 ex) beforeMount → onBeforeMount

 

- 반응형 data 사용하기

ref : 원시 값 및 객체나 배열에 반응형, 함수 내에서 값에 접근할 때는 변수명.value로 접근, return 시 변수명.value로 접근

reactive :  객체나 배열을 사용하는 경우에만 반응형, 함수 내에서 값에변수명으로 바로 접근