Vue 컴포넌트

Vue와 React는 웹페이지를 만들 때 컴포넌트 기반의 설계를 할 수 있도록 하는 프레임워크/라이브러리이다. 웹페이지의 설계 컨셉은 따라서 거의 동일하다고 볼 수 있다. 다만 기본적인 구현 방식에서는 조금씩 차이가 있다.

1. 전역등록

   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')

2. 지역등록

   원하는 페이지에서 컴포넌트를 선언한다.

//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>

• import로 컴포넌트 불러오기
• components에 등록하기
• template에서 사용하기
• 주의사항?
  - 컴포넌트 선언 시에 두 단어 이상의 kebab-case로 이름을 지으라는 가이드가 있다.
  - 다만 그렇게 안 해도 되긴 된다.
  
  

3. 리액트의 경우

//컴포넌트
export default function Component () {
	return (
		...
	)
}

//컴포넌트를 불러오는 곳
import Component from "./Comonent"

...

return (
	<>
		<Component />
	</>
)

...

컴포넌트를 만들고 불러오는 과정 자체는 큰 차이는 없으나, Vue의 경우 불러와서 components에 등록 후 사용해야 하는 과정이 한번 추가 된다는 점에서 React에서의 구현이 더 직관적인 측면이 있는 것 같다.

참조링크 : https://kdydesign.github.io/2019/04/27/vue-component/