Page 7 -

이 책의 구성 });
</script>
<template>
<div>
<input v-model="message" placeholder="메시지를 입력하세요." />
<p ref="messageParagraph">{{ message }}</p>
</div>
코딩을 처음 배우는 사람도 자세한 설명과 친절한 지시선으로 막힘없이 따라 할 수 있습니다.
</template>
기본 설명 외에도 팁, 노트, 조언 등을 적재적소에 배치해 완벽한 자율학습을 할 수 있게 이끕니
앞의 코드를 실행한 뒤 입력 요소에 값을 입력해 각 콜백 함수가 실행되게 하면 다음과 같이
옵션스 API 컴포지션 API
watchEffect() 함수만 DOM이 갱신된 후의 값을 제대로 가져오는 것을 볼 수 있습니다.
다. 예제로 문법을 익히고 1분 퀴즈, 셀프체크로 이어지는 단계별 학습으로 개념을 완벽하게 이
beforeCreate()
setup 영역이 대체함
created() setup 영역이 대체함 그림 7-11 watchPostEffect() 실행결과
beforeMount()
해할 수 있습니다. onBeforeMount()
mounted() onMounted() 7장 컴포지션 API 다루기
beforeUpdate() onBeforeUpdate()
① 형식 onUpdated() ② 팁과 노트
updated()
beforeUnmount()
onBeforeUnmount()
문법을 이해하고 활용하기 쉽게 정리 실습 시 생길 수 있는 의문점 해결
unmounted() onUnmounted()
② 컴포지션 API에서 props 속성은 defineProps() 함수로 정의하며, 형식은 다음과 같습
Note 메모리에서 제거하기
니다.
watch(), watchEffect(), watchPostEffect() 함수는 모두 컴포넌트가 종료되기 전에 메모리에서 자
형식 <script setup> 동으로 해지됩니다. 컴포넌트의 종료 여부와 상관없이 인위적으로 메모리에서 제거하고 싶다면 각 함수에서
const props = defineProps({ 반환한 함수를 사용하면 됩니다.
7장 컴포지션 API 다루기
propA: String,
propB: [String, Number],
const unwatch = watch( 중략 );
propC: {
const unwatchEffect = watchEffect( 중략 );
type: Object,
const unwatchPostEffect = watchPostEffect( 중략 );
default: () => ({}),
unwatch();
required: true
unwatchEffect();
},
unwatchPostEffect();
});
</script>
import { useRoute } from 'vue-router';
const route = useRoute();
③ 옵션스 API에서는 컴포넌트에서 전달한 이벤트를 받을 때 emits 옵션 속성을 사용하지
const id = route.params.id; // 한 번에 useRoute().params.id라고 작성해도 됨
만, 컴포지션 API에서는 defineEmits() 함수를 사용합니다.
console.log(id);
</script> 319
③ 1분 퀴즈 ④ 수코딩의 조언
<template>
형식 <script setup>
<h1>id: {{ id }}</h1>
import { defineEmits } from 'vue';
간단한 문제로 배운 내용을 바로 확인 현업에서의 경험이 담긴 조언으로 노하우 습득
const emit = defineEmits(eventNamesArray); </template>
</script>
1분 퀴즈 정답 노트 p.558
컴포지션 API 방식으로 route 인스턴스에 접근할 때 한 가지 주의할 점이 있습니다.
수코딩의 조언
2. 다음 설명 중 틀린 것을 고르세요. useRoute() 함수를 호출해 반환되는 route 인스턴스는 반드시 <script setup> 내부에
서 사용해야 하고, 라이프사이클 훅이나 함수 안에서 사용하면 안 됩니다. 즉, 다음과 같이 작
① 옵션스 API에서는 함수를 정의할 때 methods 옵션 속성을 사용한다.
339 성하면 에러가 발생합니다.
② 컴포지션 API에서 반응형 데이터는 ref() 또는 reactive() 함수로 정의한다.
③ ref() 함수로 생성한 반응형 데이터를 HTML 태그의 ref 속성의 값으로 지정해 DOM 요소를 참조 <script setup>
import { onBeforeMount } from 'vue';
할 수 있다.
import { useRoute } from 'vue-router';
④ 계산된 속성은 반응형 데이터 1개 이상을 참조해서 미리 데이터를 계산할 때 사용하며, computed() onBeforeMount(() => { 8장 뷰 라우터로 라우팅 기능 사용하기
함수로 정의한다. const route = useRoute(); // 에러 발생
...
⑤ 컴포지션 API에서 사용할 수 있는 감시자 속성은 watch(), watchEffect(), watchPostEffect() });
함수로 정의한다. </script>
8.2.3 예외 처리
뷰 라우터를 사용했을 때 정의된 URL의 패스가 라우트 객체에 없다면 에러 없이 빈 화면을 보
008 여줍니다. 하지만 정의되지 않은 패스 값을 사용해 애플리케이션에 접근했다는 것 자체가 넓은
범위에서는 에러로 인식되는 것이 타당합니다. 그래서 보통은 이런 경우를 대비해 라우트 객체
에 정의되지 않은 모든 경로를 인식해서 별도의 에러 페이지가 보일 수 있도록 처리합니다.
그러면 라우트 객체에 정의되지 않은 패스 값을 모두 일치시킬 수 있는 라우트 객체는 어떻게
정의할 수 있을까요? 앞에서 배운 동적 경로 매칭은 특정 패턴의 URL만 인식하므로 모든 경
로를 일치하게 하지는 못합니다. 예를 들어, 다음과 같이 '/:notfound'라고 작성하면 /user,
357

320