Vue 학습

3장. 구성 요소 구성하기

이 작품은 AI를 사용하여 번역되었습니다. 여러분의 피드백과 의견을 환영합니다: [e-mail]

이전 장에서는 Vue의 기본 사항과 Options API를 사용하여 일반적인 지시문을 사용하여 Vue 컴포넌트를 작성하는 방법을 배웠습니다. 이제 다음 단계인 반응성과 후크를 사용하여 더 복잡한 Vue 컴포넌트를 작성할 준비가 되었습니다.

이 장에서는 Vue 단일 파일 컴포넌트(SFC) 표준, 컴포넌트 수명 주기 후크, 계산된 속성, 감시자, 메서드 및 참조와 같은 기타 고급 반응형 기능에 대해 소개합니다. 또한 슬롯을 사용하여 컴포넌트의 여러 부분을 동적으로 렌더링하는 동시에 스타일로 컴포넌트의 구조를 유지하는 방법도 배웁니다. 이 장이 끝나면 애플리케이션에서 복잡한 Vue 컴포넌트를 작성할 수 있게 됩니다.

Vue 단일 파일 컴포넌트 구조

Vue는 .vue 확장자로 표시되는 새로운 파일 형식 표준인 Vue SFC를 도입했습니다. SFC를 사용하면 동일한 파일에 HTML 템플릿 코드, JavaScript 로직 및 컴포넌트에 대한 CSS 스타일을 각각 전용 코드 섹션에 작성할 수 있습니다. Vue SFC에는 세 가지 필수 코드 섹션 이 포함되어 있습니다:

템플릿

이 HTML 코드 블록은 컴포넌트의 UI 보기를 렌더링합니다. 컴포넌트당 최상위 요소 에 한 번만 표시되어야 합니다.

스크립트

이 JavaScript 코드 블록은 컴포넌트의 주요 로직을 포함하며 컴포넌트 파일당 최대 한 번만 나타납니다.

스타일

이 CSS 코드 블록에는 컴포넌트의 스타일이 포함되어 있습니다. 선택 사항이며 컴포넌트 파일당 필요한 횟수만큼 표시할 수 있습니다.

예제 3-1은 MyFirstComponent 이라는 이름의 Vue 컴포넌트에 대한 SFC 파일 구조의 예입니다.

예제 3-1. MyFirstComponent 컴포넌트의 SFC 구조

<template>
 <h2 class="heading">I am a a Vue component</h2>
</template>
<script lang="ts">
export default {
 name: 'MyFistComponent',
};
</script>
<style>
.heading {
  font-size: 16px;
}
</style>

그림 3-1 과 같이 비 SFC 컴포넌트 코드를 SFC로 리팩터링할 수도 있습니다.

그림 3-1. 컴포넌트를 비-SFC 형식에서 SFC 형식으로 리팩터링하기

그림 3-1에서 볼 수 있듯이 다음과 같은 리팩터링을 수행합니다:

• template 필드의 문자열 값으로 표시된 HTML 코드를 단일 파일 컴포넌트의 <template> 섹션으로 이동합니다.

• 나머지 MyFirstComponent 로직은 export default {} 객체의 ...