Vue와 React는 웹페이지를 만들 때 컴포넌트 기반의 설계를 할 수 있도록 하는 프레임워크/라이브러리이다. 따라서 두 언어의 웹페이지 설계 컨셉은 거의 동일하다고 볼 수 있다. 다만 기본적인 구현 방식에서는 조금씩 차이가 있다.
전역등록
main.js에서 글로벌 컴포넌트를 선언한다
//main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
//GlobalComponent는 별도의 파일로 만들어야 함
import GlobalComponent from './components/global-component'
Vue.component(GlobalComponent.name, GlobalComponent)
new Vue({
render: h => h(App),
}).$mount('#app')
//app.vue
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import GlobalComponent from './components/global-component'
Vue.component(GlobalComponent.name, GlobalComponent)
new Vue({
render: h => h(App),
}).$mount('#app')
지역등록
원하는 페이지에서 컴포넌트를 선언한다.
//app.vue
//LocalComponent는 별도의 파일로 만들어야 함
<template>
<div id="app">
<global-component></global-component>
<local-component></local-component>
</div>
</template>
<script>
import LocalComponent from './components/local-component'
export default {
name: 'app',
components: { "local-component" : LocalComponent }
}
</script>
//컴포넌트
export default function Component () {
return (
...
)
}
//컴포넌트를 불러오는 곳
import Component from "./Comonent"
...
return (
<>
<Component />
</>
)
...
컴포넌트를 만들고 불러오는 과정 자체는 큰 차이는 없으나, Vue의 경우 불러와서 components에 등록 후 사용해야 하는 과정이 한번 추가 된다는 점에서 React에서의 구현이 더 직관적인 측면이 있는 것 같다.
참조링크 : https://kdydesign.github.io/2019/04/27/vue-component/