실전 코드로 배우는 Vue.js

171

CHAPTER 04

컴포넌트 상호작용

const props = withDefaults(defineProps<ChildProps>(), {

name: 'Hello from the child component.'

})

CAUTION

타입스크립트의 유효성 검사와

defineProps

()

withDefaults()

를 쓰면

props

타입의 런타임 검사와 컴파일타임 검사가 동시에 작동하지 않는다. 가급적

[예제

4

-

11

] 방식으로

defineProps()

를 사용하면서 코드 가독성을 높이고

Vue

와 타입스크립트의 유효성

검사를 병행하기 바란다.

지금까지

Vue

컴포넌트에

props

를 선언하고 원시 데이터

raw

data

를 전달할 때 타입과 유효성

을 검사하는 방법을 배웠다. 다음으로 커스텀 이벤트 이미터

emitter

함수를 작성하고 자식 컴포

넌트에 전달하는 방법을 살펴보자.

4.24.2

커스텀 이벤트와 컴포넌트 간 통신 커스텀 이벤트와 컴포넌트 간 통신

Vue

는

props

를 통해 자식 컴포넌트로 전달된 데이터를 읽기 전용 원시 데이터로 취급한다.

데이터가 단방향 흐름을 따르는 이상 데이터

prop

을 업데이트할 수 있는 유일한 경로는 부

모 컴포넌트뿐이다. 그러나 가끔 특정 데이터

prop

을 업데이트하고 이를 부모 컴포넌트와

동기화해야 하는 경우가 있다. 이럴 때는 ...