컴포넌트(Component)란 ...?
Vue의 강력한 기능중 하나로, 중복되어 복잡한 코드를 해결할 수 있는 최선의 방안.
컴포넌트는 쉽게 말해 '나누는 것' 이다. 단적인 예로 홈페이지의 네비게이션 바는 모든 페이지에서 필요하다. 각 페이지에서 중복이 되니 따로 분리해서 컴포넌트의 이름만 명시 하는 것으로 추가 시킬 수 있다.
(HTML로 웹을 제작할때 파일을 분리해서 제작하는 것과 비슷한 느낌을 받는다.)
분리된 컴포넌트는 또 다른 컴포넌트에 삽입되거나, main 파일에 사용될 것이다. 그 경우 삽입된 컴포넌트와 사용하는 파일 사이에는 부모-자식 관계가 성립된다.
Props는 컴포넌트에서 사용되는 기능이다
앞서 컴포넌트가 사용되면 부모-자식 관계가 성립된다고 말했는데, 부모의 데이터를 컴포넌트에서 사용하고 싶을때 사용하는 것이 props 이다. 데이터 뿐만 아니라 methods를 부모->자식으로 넘겨줘서 자식(컴포넌트)은 이를 이용할 수 있게 된다.
컴포넌트의 사용법
컴포넌트를 사용하기 위해선 크게
1. 컴포넌트 파일(.vue)을 만든다
2. 컴포넌트를 import 한다
3. 컴포넌트를 components에 등록한다
4. 컴포넌트를 사용한다
네 가지 단계를 거쳐 사용한다. 복잡해 보이지만 문법적으로 어려운 것 하나없이 손쉽게 사용할 수 있다.
다음에서 예제를 살펴보자.
<template>
<Nav/> <!-- 4. Nav 컴포넌트 사용 -->
</template>
<script>
import Nav from '/Nav.vue파일 경로' <!-- 2. Nav 컴포넌트 import -->
export default{
name: "App",
data() {
return{
menu: ['Home', 'Shop', 'Main'],
<!-- Nav에 들어가는 데이터 -->
}
},
components: {
Nav: Nav, <!-- 3. Nav 컴포넌트 등록 -->
}
</script>위와 같이 작성을 한다면, 기존에 사용된 menu 데이터는 Nav 컴포넌트에서 사용할 수 없게 된다.
왜냐하면 기존에는 하나의 파일 안에서 동작했지만, 컴포넌트로 분리된 순간 엄연히 다른 파일이기 때문에 App.vue에 등록한 데이터는 사용할 수 없다.
이를 해결하기 위해선 Nav.vue의 데이터를 똑같이 만들어 줘도 되지만, 중복된 데이터는 없앨 수 있으면 없애는 것이 개발자의 참된 모습이기 때문에 이 방법은 옳지 않다.
따라서 우리는 props를 활용해야 한다!
Props의 사용법
props는 컴포넌트를 사용할 때 같이 넘겨주면 되는데, 사용 방법은 다음과 같다.
1. 컴포넌트를 사용하는 곳에 명시해 props로 넘겨준다
※속성 바인딩과 같이 :(콜론) 사용
2. 자식 관계의 컴포넌트(예시에선 Nav.vue)파일에 props를 등록해 준다
3. 자식 관계의 컴포넌트 파일에서 데이터 바인딩 형식으로 사용한다
### App.vue ###
<template>
<Nav :menu="menu" /> <!-- 1. Nav 컴포넌트에 props로 데이터를 넘겨줌 -->
</template>
<script>
import Nav from '/Nav.vue파일 경로'
export default{
name: "App",
data() {
return{
menu: ['Home', 'Shop', 'Main'],
<!-- Nav에 들어가는 데이터 -->
}
},
components: {
Nav: Nav,
}
</script>### Nav.vue ###
<template>
<div v-for="section in menu" :key="section"> <!-- 3. props로 받은 데이터 사용 -->
{{section}}
</div>
</template>
<script>
export default{
name: "nav",
data(){
return{
}
},
props: {
menu: Array, <!-- 2. props로 받은 데이터 등록 -->
}
}
</script>
컴포넌트를 잘 사용한다면 원하는 기능을 알아보기 쉽고, 수정 삭제가 용이하게 제작할 수 있다.
'Web > Vue.js' 카테고리의 다른 글
| [Vue.js] Vue 문법 -2 (v-for, v-if) (0) | 2022.01.14 |
|---|---|
| [Vue.js] Vue 문법 -1 (구성, 데이터바인딩) (0) | 2022.01.07 |
| [Vue.js] Vue의 시작 (0) | 2022.01.06 |
