Composition API
Composition API란?
-
대규모 Vue 애플리케이션에서의 컴포넌트 로직을 효과적으로 구성하고 재사용할 수 있도록 만든 함수 기반의 API
-
Vue3에서 새롭게 추가된 기능
-
지금까지 컴포넌트 작성 방법
- data, methods, computed, watch와 같은 옵션들을 작성
→ 옵션 API(Options API)
: Options API 방식? 논리적 관심사 코드가 분리됨, 로직 재사용의 불편함
- data, methods, computed, watch와 같은 옵션들을 작성
setup 메서드를 이용한 초기화
setup() 메서드
-
data, methods, computed 옵션이 사라짐
-
초기화 작업을 setup()에서 정의
-
beforeCreate, created 단계에서 setup() 메서드가 호출
-
반응성을 가진(Proxy) 상태 데이터, 계산된 속성, 메서드, 생명주기 훅을 작성(Proxy 생성 책임이 Vue2와 달리 Vue3에서는 개발자에게)
→ 객체 형태로 리턴(작성한 데이터나 메서드를 템플릿에서 이용)
ref 초기값을 줌
setup() {
const x = ref(10); // 10은 초기값
const y = ref(20);
-> proxy 생성
return { x, y }
}setup() 메서드의 매개변수
- 두 개의 인자
- 부모 컴포넌트로부터 전달받는 속성(props)
- 컴포넌트 컨텍스트(component context)
- 기존 옵션 API에서 this에 해당
- vue 인스턴스의 속성에 접근가능(예. emit())
반응성을 가진 상태 데이터
기본형 데이터(숫자, 문자열, 불린 등)는
ref사용
객체나 배열을 다룰 때는reactive사용
객체를ref로 감싸는 경우도 있지만,reactive가 더 직관적
ref()
- data 옵션에 해당
- 기본 데이터 타입에 대한 반응성 데이터 생성
-
기본 타입(primitive type)의 값을 이용해 반응성을 가진 참조형 데이터 생성
-
해당 데이터를 스크립트에서 사용할 때는 x.value로 접근해야 함
(.value를 사용하지 않고 바로 값을 대입하면 반응성을 잃어 버림)
-
❌
.value를 사용하지 않고 값을 대입하면 반응성을 잃는다!
count = 10;→ ❌ Vue의 반응형 시스템에서 벗어남count.value = 10;→ ✅ 반응성이 유지됨✅
ref는 기본형(Primitive) 데이터를 감싸는 객체!
- Vue는
ref내부의.value를 감지하여 자동으로 반응형 업데이트를 수행함.⇒ 그러니까
ref를 사용할 때는 항상.value를 붙여야 한다!
reactive()
- 참조 데이터 타입에 대한 반응성 데이터 생성
- 배열, 객체 등 참조형에 대한 반응성을 가지도록 함
<반응성을 잃는 경우>
reactive()객체를 직접 대체하면 반응성을 잃음 → 속성만 변경해야 함reactive()를ref()와 함께 쓸 때는 computed()를 활용해야 반응성을 유지할 수 있음provide()로reactive()를 전달할 때는toRefs()를 사용하는 것이 안전함
computed()
- 옵션 API에서 computed 옵션에 해당(계산된 속성)
- Composition API에서 계산형 속성을 만들 때 사용
import { computed } from 'vue'; const 속성명 = computed(()=> { … return 값; });
→ computed()는 값을 자동으로 계산하고 캐싱(저장)하는 반응형 함수이다. 어떤 데이터(ref, reactive)가 바뀌면, 자동으로 다시 계산되지만, 필요할 때만 실행된다!
watch와 watchEffect
watch
- watch() 함수를 통해서 제공
watch(data, (current, old) => {
// 처리하려는 연산 로직
})
- 첫 번째 인자, data : 감시하려는 대상 반응성 데이터, 속성, 계산된 속성
- 두 번째 인자: 핸들러 함수
- current: 변경된 값
- old: 변경되기 전 값
-> current, old는 ref 객체가 아닌 ref.value에 해당하는 값 주의watchEffect
watchEffect(()=>{
// 반응성 데이터를 사용하는 코드 작성
})생명주기 훅(Life Cycle Hook)
Composition API의 생명주기
옵션 API의 생명주기 메서드와 다른점
- beforeCreate(), created() 메서드의 기능을 setup()으로 대체
- 나머지 생명주기 메서드는 앞에 on 접두어를 붙인 함수로 변경됨
- 실행할 함수를 매개변수로 전달
setup() {
// mounted
onMounted(()=>{
…
});
…
}<script setup> 사용하기
<script setup>
-
단일 파일 컴포넌트 내부에서 Composition API를 좀 더 편리한 문법적 작성 기능 제공
-
setup() 함수 내부 코드로 이용됨
-
장점
- 적은 상용구 코드 사용으로 간결한 코드 작성
- 런타임 성능이 더 좋음
- IDE에서의 타입 추론 성능이 더 뛰어남
- 순수 타입스크립트 언어를 사용해 props, 이벤트를 선언할 수 있음
-
템플릿에서 사용하는 값
- 최상위의 변수, 함수는 직접 템플릿에서 사용 가능
-
지역 컴포넌트 등록
- import만 하면 됨, components 속성 필요 없음
-
속성과 이벤트 처리
<script setup>의 장점
1️⃣ 코드가 짧고 깔끔함
setup()함수와return을 생략할 수 있어 가독성이 좋아짐2️⃣ 자동 최적화
- Vue 내부적으로
setup()을 최적화하여 실행 성능이 더 좋아짐- 선언한 변수들이 자동으로 템플릿에서 접근 가능하여
this를 사용할 필요가 없음3️⃣ 더 쉬운
props&emit
props와emit을 간결하게 선언 가능4️⃣ 명확한 Scope
<script setup>내부에서 선언한 변수와 함수들은 해당 컴포넌트 내부에서만 사용됨this가 필요 없고,this관련 버그를 방지할 수 있음
