vue3 composition api

박경준·2022년 4월 11일
1

지표 관리

목록 보기
1/3

Composition API

options-based API의 경우 prop, data, computed, hook 등의 옵션으로 로직이 분리되어있어 논리적 관점 단위로 개발을 하기 애매하게 만든다. 예를 들면 사용자 조회라는 로직이 있을경우, 관련 로직이 data와 computed, 특정 method 에 흩어질 수 있다. 이것을 극복하기위해 Composition API가 만들어졌다.

setup 옵션에서 사용하기

setup 이라는 옵션이 생겼고, 이 안에서 Composition API를 사용할 수 있다.

export default {
  props: {
    user: { type: String }
  },
	data(){
		return {
			test: '',
		}
	},
  setup(props) {
    console.log(props); // { user: '' }

    return {}; // 여기서 반환된 내용은 컴포넌트의 "rest"에서 사용할 수 있습니다
  }
  // 컴포넌트의 "rest" 부분
}

<script setup> 사용하기

<script setup>
// variable
const msg = 'Hello!';

// functions
function log() {
  console.log(msg);
}
</script>

<template>
  <div @click="log">{{ msg }}</div>
</template>

<script setup> 은 컴포넌트의 인스턴스가 생성될때마다(created) 호출된다. 따라서 setup() 내부의 this는 현재 활성화된 인스턴스에 대한 참조가 아니다. created 관련 훅도 필요하지 않다.

여기서 선언된 탑 레벨 변수 및 하수는 모두 템플릿에서 바로 사용할 수 있다. 우리가 종종 사용하는 유틸함수들도 import 후 바로 템플릿에서 사용할 수 있다.

<script setup>
import { u_capitalize } from './utils';
</script>

<template>
  <div>{{ u_capitalize('hello') }}</div>
</template>

처음부터 options-basedAPI를 사용하지 않고 <script setup> 을 사용하는것을 추천한다.

  • 더 간결한 코드
  • 타입스크립트 사용이 용이함
  • 더 나은 성능

반응성 — Reactivity API

Vue 2.x의 Options-based API의 data() 함수에서 세팅된 변수는 모두 자동으로 반응성을 얻게 되는데, Composition API 에서는 반응성 변수를 만들기 위해서는 **Reactivity API를 직접 활용해야 한다**.

Reactivity API는 2.x에서의 Vue.observable() API 에서 온 것인데 RxJS의 observables 과 혼동을 피하기 위해 이름을 바꿨다. 이것은 Vue 의 핵심 기능이다. 뷰는 종속성 추적을 통해 반응형 값들의 상태가 변경될때 화면을 자동으로 업데이트 한다.

ref()

Reactivity API 중 하나인 ref 함수는 원시값에 대해 반응성을 부여할때 사용하면 된다.

<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

ref 함수는 불변성의 원시값을 내부 값으로 취한다음 변경가능하고 반응성이 있는 객체를 리턴한다.(ref wrapping) 이 객체는 내부 값을 가리키는 .value 라는 속성 가진다. 템플릿에서 사용될때는 값에 접근할때 자동으로 .value 속성으로 반환(Unwrapping)된다. 스크립트 안에서 값을 변경하기 위해서는 직접 .value 속성을 사용해야 한다.

<script setup>
import { ref } from 'vue';

const count = ref(0);
const handleClickAdd = () => {
	count.value++;
}
</script>

<template>
  <button @click="handleClickAdd">{{ count }}</button>
</template>

reactive()

객체값에 반응성을 부여하고 싶다면 reactive 함수를 사용하면 된다. 이때 속성의 값을 변경하려고 하면 자동으로 Unwrapping 이 동작한다.

const obj = reactive({ count: 0 });
obj.count++; // 자동으로 unwrapping 된다.

reactive로 감싼 객체가 Array나 Map과 같이 표준 내장 컬렉션 타입인 경우 자동 Unwrapping이 동작하지 않는다.

const books = reactive([ref('Vue 3 Guide')])
// 여기에는 .value 가 필요합니다.
console.log(books[0].value)

computed()

import { ref, computed } from 'vue'

const counter = ref(0)
const twiceTheCounter = computed(() => counter.value * 2)

counter.value++
console.log(counter.value) // 1
console.log(twiceTheCounter.value) // 2

watch 사용하기

import { ref, watch } from 'vue'

const counter = ref(0)
watch(counter, (newValue, oldValue) => {
  console.log('새로운 counter 값: ' + counter.value)
})

props, emit

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup code
</script>

라이프 사이클 훅

상태관리

  • Composition API 활용해서 직접 제작
  • Piana 활용

참고자료

profile
빠굥

0개의 댓글