src 보면
App.vue랑 또 components 폴더 보면 또 .vue 파일이 있다.
이런 vue파일들을 컴포넌트라고 한다.
이런 컴포넌트를 모으는 메인 컴포넌트가 App.vue인 것 같다.
컴포넌트를 개발하여 저 App.vue라는 메인 컴포넌트에 붙이는 형식인 것 같다.
또, src보면 main.js 라고 있는데,
이렇게 되어 있다.
먼저, vue 라이브러리에서 createApp이라는 이름으로 객체로써 import하고, (vue를 createApp이라는 객체로 만들었다고 생각하면 될 듯.)
메인 컴포넌트인 App.vue를 App이라는 이름으로 import 한 다음,
createApp(App).mount('#app')
vue.mount('#app') 과 같다.
mount는 뭔가를 연결시켜주는? 그런거다. 즉, #app이라는 것과 createApp(App).mount(#app) App이라고 명명한 App.vue를 연결시켜준다는 건데,
저 #app이란 것은 어디에 있냐면,
public -> index.html에 가보면
이렇게 되어 있다.
id="app" 저 곳과 연결하는 거다. 즉, App.vue에 적용한 것을 저 <div id="app"></div> 이 공간과 연결시킨다는 것이다.
asset폴더
이거는 resouces폴더라고 할까? 이미지나 그런 거 저장해 놓는 곳.
자, 이제 제대로 뷰 템플릿을 살펴보자.
html과 비슷하게 생각해보자.
template가 있다. 저 파트가 우리가 이제 실제로 보여지는 html의 body파트라고 생각하면 된다.
태그도 똑같은데, 조금 다른게 <HelloWorld msg="Hello vue!!!"/> ? 이건 뭘까. 아래 스크립트 란을 보자.
놀랍게도 ./components/ 경로에 있는 HelloWorld.vue라는 컴포넌트를 HelloWorld라는 이름으로 import 했다.
export는 밖으로 나갈 때 정의되어지는 이름 같은데, components에는 자기가 사용한 컴포넌트들 정의해 놓는 것 같다.
왜냐하면 밖에서 이거 불러다 쓰려면 어떤 다른 컴포넌트 썼는지도 알아서 불러와야 하니까.
스타일은 그냥 스타일이다.
#app 이렇게 되어 있는데, 아까 App.vue랑 연결되어 있다고 말했다. 즉, 저 스타일은 그 연결한 #app에 쓰려고 한 것이다. 아무래도 메인 컴포넌트 이다 보니, 여기에 정의한 것 같다.
참고로 이따 보겠지만, scope 라는 게 있다.
여튼 이런 식 컴포넌트를 script에서 import해서 불러오면, 쓸 수 있는 것 같다.
<HelloWorld msg="Hello vue!!!"/> 템플릿 파트에서 태그로 쓰는 것 같다. msg를 속성으로 값을 줬는데, 한번 HelloWorld.vue를 실제로 들어가 보자.
필요 없는 거 많이 지우긴 했다.
한번 보자.
템플릿 파트에서는 그냥 hello클래스의 div에, 거기 안에 h1태그가 있는데 {{msg}}?
아, 스크립트의 변수를 {{변수명}} 이렇게 사용하는 구나.
스크립트 파트를 보자.
export 라는 것은 직역으로 내보내다, 라는 뜻인데. 내보낼 때 이름은 HelloWorld, props는 properties의 준 말로, 객체의 필드를 의미한다. 무언가로 내보낼 때도 객체로 내보내는 느낌이다.
여튼, 거기서 속성은 msg: String 타입으로 가지고 있다.
다시 App.vue를 보면
<HelloWorld msg="Hello vue!!!"/>
아, 이게 객체의 필드를 속성이라고도 하는데, 태그의 속성 주듯이 프로퍼티에 이렇게 주는구나.
export라고 하는 것은, 외부와의 소통, 이라기 보다는 더 직접적으로는 외부에서 이걸 어떻게 사용해야 하는지에 대한 정의. 라고 보면 될 듯 하다. ~~~ 이렇게 해서 바깥으로 export 시킨다는 뜻이니까.
App.vue에서 호출할 때
<HelloWorld msg="Hello vue!!!"/>
이렇게 프로퍼티에 값을 줬고.
HelloWorld.vue에서
msg를 프로퍼티로 받을 수 있고,
<h1>{{ msg }}</h1>
이렇게 사용했다.
호출 순으로 보자면,
#app과 App.vue를 연결한 거니까
<div id="app">
<App>
<HelloWorld msg="Hello vue!!!">
</HelloWorld>
<App>
</div>
이런 느낌이다.
App이 또 템플릿 내부에다가 HelloWorld컴포넌트를 호출했으니까.
여기서 scoped 라는 것은, 이 컴포넌트에서만 스타일을 적용한다는 뜻이다.
지금 정리가 두서가 없는데,
뷰 컴포넌트의 기본 구조, 호출방법
이렇게 정리하면 명확하겠다.
'Vue.js' 카테고리의 다른 글
| v-bind, data() (0) | 2023.09.20 |
|---|---|
| 3. 스크립트 파트 (0) | 2023.09.19 |
| 2. 뷰 컴포넌트의 기본 구조 (0) | 2023.09.19 |
| 뷰 설치 (0) | 2023.09.18 |
| 뷰의 구조 (0) | 2023.09.13 |