컴포넌트 기초
- 컴포넌트를 사용하면 UI를 독립적이고 재사용 가능한 일부분으로 분할하고 각 부분을 개별적으로 다룰 수 있다. 따라서 앱이 중첩된 컴포넌트의 트리로 구성되는 것이 일반적이다.
HTML 엘리먼트를 중첩하는 방법과 매우 유사하지만, Vue는 각 컴포넌트에 사용자 정의 컨텐츠와 논리를 캡슐화할 수 있는 자체 컴포넌트 모델을 구현한다.
컴포넌트 정의하기
- 빌드 방식을 사용할 때 일반적으로 싱글 파일 컴포넌트라고 하는
.vue확장자를 사용하는 전용 파일에 각 Vue 컴포넌트를 정의한다.
<script>
export default {
data() {
return {
count: 0
}
}
}
</script>
<template>
<button @click="count++"> 당신은 {{ count }} 번 클릭했습니다. </button>
</template>빌드 방식을 사용하지 않을 때, Vue 컴포넌트는 Vue 관련 옵션을 포함하는 일반 JavaScript 객체로 정의할 수 있다.
export default {
data() {
return {
count: 0
}
},
template: `
<button @click="count++">
당신은 {{count}} 번 클릭했습니다.
</button>`
}JavaScript 문자열로 정의한 템플릿은 Vue가 즉석에서 컴파일한다. 엘리먼트(보통 기본<template> 엘리먼트)를 가리키는 ID 셀렉터를 사용할 수도 있다. Vue는 해당 컨텐츠를 템플릿 소스로 사용한다.
위의 코드는 단일 컴포넌트를 정의하고 이를 .js파일의 내보내기 기본 값으로 내보낸다. 그러나 명명된 내보내기를 사용하여 한 파일에서 여러 개의 컴포넌트로 내보낼 수 있다.
컴포넌트 사용하기
자식 컴포넌트를 사용하려면 부모 컴포넌트에서 가져와야한다. 파일 안에 ButtonCounter.vue라는 카운터 컴포넌트를 배치했다고 가정하면, 해당 컴포넌트 파일의 기본 내보내기가 노출된다.
<script>
import ButtonCounter from './ButtonCounter.vue'
export default {
components: {
ButtonCounter
}
}
</script>
<template>
<h1>아래에 자식 컴포넌트가 있습니다.</h1>
<ButtonCounter />
</template>가져온 컴포넌트를 템플릿에 노출하려면 components옵션을 사용하여 등록해야한다. 그러면 컴포넌트는 등록된 키를 사용하여 태그로 사용할 수 있다.
컴포넌트를 전역으로 등록하면, 가져오기(import) 없이 지정된 앱의 모든 곳에서 컴포넌트를 사용할 수 있다.
- 컴포넌트는 원하는 만큼 재사용할 수 있다.
<h1>여기에 많은 자식 컴포넌트가 있다!</h1>
<ButtonCounter />
<ButtonCounter />
<ButtonCounter />버튼을 클릴할 때 각 버튼은 독립적인 count를 유지한다. 컴포넌트를 사용할 때 마다 해당 컴포넌트의 새 인스턴스가 생성되기 때문
Props 전달하기
블로그를 구축하는 경우 블로그 게시물을 나타내는 컴포넌트가 필요할 수 있다. 우리는 모든 블로그 게시물이 동일한 시각적 레이아웃을 공유하기를 원하지만 컨텐츠는 다르다. 이러한 곳에 사용할 컴포넌트는 표시하려는 특정 게시물의 제목 및 컨텐츠와 같은 데이터를 전달 할 수 없으면 유용하지 않다. props가 필요한건 바로 이때이다.
props은 컨포넌트에 등록할 수 있는 사용자의 정의 속성이다. 블로그 게시물 제목을 컴포넌트에 전달하려면 ,props옵션을 사용해야 한다.
<!-- BlogPost.vue -->
<script>
export default {
props: ['title']
}
</script>
<template>
<h4>{{ title }}</h4>
</template>props 속성에 값이 전달되면, 해당 컴포넌트 인스턴스의 속성이 된다. 해당 속성의 값은 컴포넌트의 다른 속성과 마찬가지로 템플릿 내에서 그리고 컴포넌트의 this 컨텍스트에 접근할 수 있다.
컴포넌트는 원하는 만큼 props를 가질 수 있으며, 기본적으로 모든 값을 모두 props에 전달할 수 있다.
props가 등록되면, 다음과 같이 데이터를 사용자 정의 속성으로 전달할 수 있다.
<BlogPost title="Vue와 함께한 나의 여행" />
<BlogPost title="Vue로 블로깅하기" />
<BlogPost title="Vue가 재미있는 이유" />그러나 일반적인 앱에서는 부모 컴포넌트에 다음과 같은 게시물 배열이 있을 수 있다.
export default {
// ...
data() {
return {
posts: [
{ id: 1, title: 'Vue와 함께한 나의 여행' },
{ id: 2, title: 'Vue로 블로깅하기' },
{ id: 3, title: 'Vue가 재미있는 이유' }
]
}
}
}
그런 다음 v-for를 사용하여 각각을 컴포넌트로 렌더링
<BlogPost
v-for="post in posts"
:key="post.id"
:title="post.title"
/> v-bind가 동적 props 값을 전달하는 데 어떻게 사용되는지 주목해야한다. 이것은 미리 랜더링할 정확한 컨텐츠를 모를 때 유용하다.
