실전 코드로 배우는 Vue.js

207

CHAPTER 05

컴포지션 API

fetchData();

</script>

➊

shallowRef

에 초기 데이터를 전달해

User

타입의 반응형 변수

user

를 만든다.

➋

shallowRef

로

undefined

또는

Error

타입의 반응형 변수

error

를 만든다.

➌ 응답 데이터를

User

타입으로 간주하고

user

값을 교체한다.

➍ 에러가 발생하면

error

값을 업데이트한다.

5.2.2

reactive

()

reactive

()

함수는

ref

()

함수와 비슷하지만 다음과 같이 두 가지 차이점이 있다.

●

객체 타입 데이터를 인수로 받는다.

●

value

나 프로퍼티를 통하지 않고 반응형 반환 객체에 직접 접근할 수 있다.

reactive

()

반환 객체는 내부 프로퍼티 값만 변경할 수 있다. 반환 객체 자체를 교체하거나

value

프로퍼티를 사용하려고 하면 다음과 같이 에러가 발생한다.

import { reactive } from 'vue'

const user = reactive({

name: "Maya",

age: 20

})

/*

TypeScript error - property 'value' does not exist

on type '{ name: string; age: number; }'

*/

user.value = {

208

실전 코드로 배우는 Vue.js ...