음악, 삶, 개발
Component 안에 Component : components 옵션 본문
< Component 란 ? >
우리가 Vue.js 에서 사용하는 .vue 파일을 다른 말로 Component 라고 한다.
우리가 만들어나갈 UI 의 요소 하나 하나가 Component 인것이다.
Vue.js 에서는 결과적으로 작은 Component 를 여러개 만들어, 이들을 결합한 새로운 Component 를,
그리고 이 새로운 Component 가 다시 다른 Component 에서 속해지면서
결과적으로 레고처럼 조립해 나가는것이다.
이들중 가장 상위에 있는 Component 가 App.vue 파일이다.
< Vue.js 앱의 구조 : #app 요소 하단에 삽입되는 App.vue 의 template>
<!-- App.vue -->
<template>
<div>I'm App.vue file!</div>
</template>이 App.vue 파일에 정의된 template 을 index.html 로 쏴주는것이 main.js 파일이다.
/* main.js */
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app');위의 main.js 에서 mount 함수의 인자로 쓰인 #app 이
바로 index.html 에서 사용하는 가장 최상단 div 의 id 이다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div id="app"></div> <!-- 여기! -->
</body>
</html>따라서 위의 코드를 실행해보면,
App.vue 의 template 이 #app 요소의 자식 요소로 삽입된것을 볼수있다.
여기서 기억해야할것은,
App.vue 는 <div id="app" > 을 나타내는것이 아니라,
<div id="app" > 의 자식으로 삽입될 요소를 나타내는다는것이다.
따라서 App.vue 는 최상단 테그의 바로 하위 테그라고 볼수있다.
< Component 안에 Component >
우리에게 있어 가장 상위 Component 는 App.vue 파일이다.
main.js 는 결국 이 App.vue 만을 index.html 로 쏴줄뿐이다.
따라서 우리가 새로 만들 모든 .vue 파일들은 App.vue 에 결과적으로 사용되어야한다.
App.vue 안에 자식 Component 를 집어넣기위해 Child.vue 라는 파일을 만들었다.
<!-- Child.vue -->
<template>
<div id="child">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
</template>이제 Child.vue 를 App.vue 에 집어넣기위해서는
3가지 스탭이 필요하다.
1. import 한다.
import Child from './components/Child.vue'이것은 말그대로 .vue 파일을 import 한 상태일뿐이다.
2. components 라는 이름의 객체를 export default 안에 집어넣는다.
이를 option 이라고 부른다.
export default {
components : { Child }
}이제 최종적으로 Child 태그를 우리는 사용할수있다.
3. template 안에 추가한다.
<template>
<Child />
</template>코딩을 하다보면,
2번 step 인 components 옵션을 빠뜨리는 실수를 자주하게될것이다.
<!-- App.vue -->
<template>
<Child />
</template>
<script>
import Child from './components/Child.vue'
export default {
}
</script>이렇게 작성한 코드는 다행히(?) 컴파일되지않는다.
'Child' is defined but never used.
"Child 가 정의되었지만, 사용되지않았다" 이다.
개인적으로 C++ 스러운 매우 좋은 기능이라고 생각한다.
어찌보면 C++ 보다 훨씬 엄격하다. C++ 에서는 주로 warning 을 주지만,
.vue 파일을 import 해놓고 사용하지않았다면 컴파일 에러를 내버리는것이다.
components 옵션을 포함하여 작동하는 최종 코드는 아래와 같다.
<!-- App.vue -->
<template>
<Child />
</template>
<script>
import Child from './components/Child.vue'
export default {
components : { Child }
}
</script>이를 실행해보면..
Child 가 잘 삽입되어있는것을 알수있다.
하지만 위와 같이 디버깅하는것은 조금 불편할수있다.
실제 .vue 파일명으로 표시되면 좋은것같은데 말이다.
다행이 Chrome 확장팩이 존재한다.
이를 사용해 보면
위와 같이 .vue 파일의 파일명을 사용하여 태그명을 보여준다.
첨언)
지금 Safari 를 쓰고있는데, Vue.js 를 코딩을 디버깅하려면
Chrome 이나 Whale 을 써야한다.
