15_컴포넌트 기초

1. 컴포넌트 종류

-SFC(Single File Component):컴포넌트를 각 파일 안에 넣어두고 재사용하는 것. 빌드도구 사용할 때 일반적으로 컴포넌트 정의하는 방법.

<template>
  <button @click="counter++">클릭 횟수 {{ counter }}</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const counter = ref(0);
    return {
      counter,
    };
  },
};
</script>

<style></style>

 

-문자열 템플릿 : 빌드도구 사용안할 때 일반 js객체로 정의하는 방법.

import { ref } from 'vue/dist/vue.esm-bundler.js';
export default {
  setup() {
    const counter = ref(0);
    return {
      counter,
    };
  },
  template: `
	  <button @click="counter++">클릭 횟수 {{ counter }}</button>
  `,
};

 

💡 vue.esm-bundler.js

-> 런타임 컴파일러를 포함

 빌드도구(Vite)를 사용하지만 여전히 런타임 문자열 템플릿을 원하는 경우이 옵션(vue.esm-bundler.js)사용함. 이 파일에 vue의 별칭 을 지정하도록 번 들러를 구성해야 한다.

 

2.컴포넌트 등록 

-전역등록 하는 방법 

app.component() 메서드를 이용하여 vue애플리케이션에서 전역적으로 어디서든 ! 사용할 수 있도록 등록한다.

*전역등록 단점 : 컴포넌트를 사용하지 않아도 계속 최종빌드에 포함되므로 불필요하게 파일크기를 크게하고 종속관계를 파악하기 어려움.

 

import { createApp } from 'vue';
import App from './App.vue';

import GlobalComponent from './components/GlobalComponent.vue';

const app = createApp(App)
app.component('GlobalComponent', GlobalComponent)
app.mount('#app');

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)
  
  //이런 메서드 체인 형태로도 가능!

 

 

-지역등록 

:현재 컴포넌트 영역안에서만 사용이 가능하며 componens 옵션을 사용해서 등록 가능함

// ParentComponent.vue 파일
import ChildComponent from './ChildComponent.vue'

export default {
	components: {
		ChildComponent
	},
	setup() {
		// ...
	}
}

 

 

3.컴포넌트 사용

<h2>Single-File Component</h2>
<ButtonCounter></ButtonCounter>
<ButtonCounter></ButtonCounter>
<ButtonCounter></ButtonCounter>

 

컴포넌트를 사용할때마다 해당 컴포넌트의 새 인스턴스가 생성됨. 즉, 사용할때마다 setup()함수가 실행 됨.

 

4.PascalCase

: 기본 HTML요소와 구분을 위해 SFC 자식컴포넌트에 pascal case를 사용하는게 좋음.

https://ko.vuejs.org/style-guide/rules-strongly-recommended.html

 

[추가]

vue 파일 경로

https://imkh.dev/vue-alias-path