실전 코드로 배우는 Vue.js

165

CHAPTER 04

컴포넌트 상호작용

NOTE

default

필드에

Function

타입이 지정된 경우,

prop

의 초기값을 반환하는 함수를 전달해야 한

다. 이 함수는 데이터를 부모 컴포넌트로 되돌려 보내지 않으며, 이 함수에서 변경되는 데이터를 부모 수준에

서 감지할 수 없다.

내장 타입은

Vue

가 기본적으로 유효성을 검사한다. 추가로, 자바스크립트

Class

또는 함수

생성자에 타입스크립트를 가미하면 커스텀

prop

타입을 만들고 유효성을 검사할 수 있다.

이어서 자세히 알아보자.

4.1.3

커스텀

prop

타입 검사

Array

,

String

,

Object

등의 기본 타입만 있어도 대부분의 사용 요건에 대응할 수 있다. 그

러나 애플리케이션이 성장하면 컴포넌트도 복잡해기 마련이며, 기본 타입만으로 타입 안전

성을 지키기 힘든 상황이 벌어지기도 한다.

PizzaComponent

에 담긴 다음과 같은 템플릿 코

드를 살펴보자.

<template>

<header>Title: {{ pizza.title }}</header>

<div class="pizza--details-wrapper">

<img :src="pizza.image" :alt="pizza.title" width="300" />

<p>Description: {{ pizza.description }}</p> ...