7장 단일 파일 컴포넌트를 이용한 Vue 애플리케이션 개발

7장 단일 파일 컴포넌트를 이용한 Vue 애플리케이션 개발

7.1 프로젝트 설정 도구

7.1.1 Vue CLI 도구

<!-- Vue CLI로 프로젝트 생성 -->
vue create my-project

Vue CLI는 Vue 프로젝트를 빠르게 설정하는 공식 도구이다. 설치 시 기본 컴포턴트 설치를 권유하여 템플릿 생성에는 용이

7.1.2 Vite 기반의 도구

<!-- Vite로 프로젝트 생성 -->
npm create vite@latest my-vite-project -- --template vue

Vite는 빠르고 현대적인 빌드 도구로 Vue 프로젝트를 설정함. 빠름 엄청

7.2 생성된 프로젝트 구조 살펴보기

7.2.1 프로젝트 생성과 시작(진입점 살펴보기)

<!-- main.js -->
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

main.js는 Vue 애플리케이션의 시작점 역할을 한다. 여기서 css 임포트 하여 전역으로 뿌려줌

7.2.2 단일 파일 컴포넌트 살펴보기

<!-- App.vue -->
<template>
  <h1>Hello, Vue!</h1>
</template>
<script>
export default {}
</script>

단일 파일 컴포넌트(SFC)는 템플릿, 스크립트, 스타일을 하나로 묶습니다.

7.2.3 간단한 단일 파일 컴포넌트 작성과 사용

<!-- HelloWorld.vue -->
<template>
  <p></p>
</template>
<script>
export default {
  data() {
    return { message: '안녕하세요!' }
  }
}
</script>

간단한 SFC는 데이터와 템플릿을 결합해 동적 UI를 만듭니다.

7.3 컴포넌트의 조합

<!-- App.vue -->
<template>
  <HelloWorld />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  components: { HelloWorld }
}
</script>

컴포넌트를 조합하면 재사용 가능한 UI를 구성하기 가능. 조립하는 부품이라고 생각하면됨

7.4 속성

7.4.1 속성을 이용한 정보 전달

<!-- Child.vue -->
<template>
  <p></p>
</template>
<script>
export default {
  props: ['text']
}
</script>

속성(props)은 부모에서 자식으로 데이터를 전달합니다.

7.4.2 속성을 이용해 객체 전달하기

<!-- Child.vue -->
<template>
  <p></p>
</template>
<script>
export default {
  props: ['info']
}
</script>

객체를 속성으로 전달해 복잡한 데이터를 공유할 수 있습니다.

7.4.3 속성의 유효성 검증

<!-- Child.vue -->
<template>
  <p>9</p>
</template>
<script>
export default {
  props: {
    count: {
      type: Number,
      required: true
    }
  }
}
</script>

속성 유효성 검증으로 데이터 타입과 필수 여부를 체크합니다.

7.5 사용자 정의 이벤트

7.5.1 사용자 정의 이벤트를 이용한 정보 전달

<!-- Child.vue -->
<template>
  <button @click="$emit('customEvent', 'Hello')">Click</button>
</template>

$emit으로 사용자 정의 이벤트를 발생시켜 자식에서 부모로 데이터를 보냅니다.

7.5.2 이벤트 유효성 검증

<!-- Child.vue -->
<script>
export default {
  emits: ['customEvent']
}
</script>

emits 옵션으로 이벤트 선언을 명시해 유효성을 확인합니다.

7.6 이벤트 에미터 사용

<!-- Child.vue -->
<script>
import { defineEmits } from 'vue'
const emit = defineEmits(['update'])
emit('update', 'New Value')
</script>

이벤트 에미터는 최신 Vue에서 이벤트를 깔끔하게 관리합니다.

7.7 TodoList 예제 리팩토링

7.7.1 컴포넌트 분할과 정의

<!-- TodoItem.vue -->
<template>
  <li></li>
</template>
<script>
export default {
  props: ['todo']
}
</script>

TodoList를 작은 컴포넌트로 나눠 관리하기 쉽게 만듭니다.

7.7.2 속성과 이벤트를 조합한 리팩토링

<!-- TodoItem.vue -->
<template>
  <li @click="$emit('remove', todo)"></li>
</template>
<script>
export default {
  props: ['todo']
}
</script>

속성과 이벤트를 사용해 Todo 항목을 동적으로 관리합니다.

7.7.3 이벤트 에미터 적용하기

<!-- TodoItem.vue -->
<script>
import { defineEmits } from 'vue'
const emit = defineEmits(['remove'])
emit('remove', 'Task 1')
</script>

이벤트 에미터로 Todo 삭제 기능을 깔끔하게 구현합니다.