Vue - Component Basic
Vue Component
Vue.createApp({
data() ...
}).component('second-app', {
data() ...
template: `
HTML 코드 복붙
`
}).mount()
컴포넌트는 기본적으로 Custom HTML 요소이고 2개의 파라미터를 받는다.
첫번쨰 파라미터는 식별자를 받으며, 무조건 -
과 두 단어로 이어진 Custom HTML Tag를 받는다.
그 이유는 기존의 HTML은 모두 한 단어로 이루어져 있기 떄문에 충돌을 방지하게 위해서이다.
두번째 파라미터는 객체를 받는다.
이 두번째 파라미터는 component()를 호출한 Vue 앱과 캡슐화가 되고, 서로 통신을 하지 않기 떄문에 동일한 프로퍼티가 있어도 충돌이 나지 않는다.
그리고 이 컴포넌트도 결국 새로운 Vue App이기 때문에 당연히 자체 템플릿도 마운트 해줘야 합니다.
메인 Vue에서 사용하던 HTML 템플릿을 전부 가져와서 template의 백틱 사이에 복붙해줍니다.
그리고 다시 HTML로 가서 컴포넌트의 식별자인 <second-app></second-app>
을 넣어주면 됩니다.
이제 저 커스텀 태그로 인해 수 많은 미니 Vue App의 복제와 캡슐화를 할 수 있습니다.
하지만 위처럼 문자열 형식으로 템플릿을 작성하는 것은 좋지 않습니다.
모든 방법에 대해 알아야 하기 때문에 이번 방법을 알아보았습니다.
이렇게 컴포넌트의 기본적인 사용법을 배웠지만 앞으로 컴포넌트 부분에서 학습할 것이 더 많습니다.
여러 App과 Component
HTML 페이지의 여러 독립적은 부분을 제어하는 여러 Vue App으로 작업하는 경우, createApp()
을 여러번 호출하여 여러앱을 만듭니다.
반면, SPA로 구축하는 경우 일반적으로 하나의 Root App으로 작업하고 여러 컴포넌트로 UI를 구축합니다.
왜일까요?
Vue 앱은 서로 독립적이므로 서로 통신할 수 없기 때문입니다.
통신할 수 있게 하는 비공식적인 방법이 존재할 수 있지만, 앱 간에 데이터를 공유하고
앱 B에서 문제가 발생하는 경우 앱 A에서 업데이트하는 마땅한 공식적인 방법이 없습니다.
반면에 곧 배우게 될 컴포넌트는 컴포넌트 간에 데이터를 교환할 수 있는 특정 통신 메커니즘을 제공합니다.
따라서 여러 컴포넌트를 포함하는 하나의 루트 앱으로 작업하는 경우 하나로 연결된 UI를 구축할 수 있다는 것을 곧 학습으로 알 수 있습니다.