Vue란 무엇인가?

VUE란?

VUE는 UI 개발을 위한 자바스크립트 프레임워크이다. HTML, CSS, JS를 기반으로 단순하거나 복잡한 UI를 효율적으로 개발하는 데에 도움을 준다.

VUE의 두가지 핵심기능

• 선언적 렌더링: 템플릿 구문({{ 데이터 }}) 형식을 활용하여 데이터를 선언적으로 렌더링할 수 있는 특징이 있다.
• 반응성: VUE는 데이터 변경을 자동으로 추적하고 변경이 발생하면 DOM을 효율적으로 업데이트한다.

컴포넌트(Component)

컴포넌트란, UI(HTML, CSS, JS)를 재사용할 수 있도록 정의한 것을 말한다. 이렇게 컴포넌트 단위로 UI 개발을 하면 코드를 깔끔하게 유지할 수 있으며 불필요한 코드 중복을 줄일 수 있다.

VUE에서 컴포넌트를 어떻게 사용할까?

1 Step. 컴포넌트 정의 => 2 Step. 컴포넌트 등록 => 3 Step. 컴포넌트 사용

1 Step. 컴포넌트 정의

컴포넌트 정의는 두가지 방법으로 할 수 있다 '문자열 템플릿 방식'과 'SFC(Single File Component) 방식'

문자열 템플릿 방식(string template)

export default {
	data() {
    	return {
        	name: '홍길동'
        }
    },
    template: `
    	<article class='box'>
        	<div class='name'>{{ name }}</div>
        </article>
    `
}

SFC(Single File Component) 방식

SFC는 template, script, style로 크게 세가지로 구성되어 있다.

<template>
	<article class='box'>
       <div class='name'>{{ name }}</div>
    </article>
</template>
<script>
	export default {
    	data() {
        	return {
            	name: '홍길동'
            }
        }
    }
</script>
<style>
</style>

실무에서는 문자열 템플릿방식보다는 SFC 방식을 주로 사용한다.

2 Step. 컴포넌트 등록

컴포넌트 등록도 어디에서 사용하냐에 따라 두가지 등록 방식이 있다.

• 전역 등록
  app.component를 이용해서 컴포넌트를 등록하면, 컴포넌트는 애플리케이션에 전역 등록이 되어 모든 컴포넌트 인스턴스의 템플릿 내부에서 사용할 수 있다.

	const app = createApp({...});
    app.component('MyName', MyName);

• 지역 등록
  전역 등록은 보통 이상적이지 않다. 왜냐하면 해당 컴포넌트를 사용하지 않더라도 계속 최종 빌드에 해당컴포넌트가 포함된다. 이는 이용자가 다운로드하는 자바스크립트 파일용량을 불필요하게 증가시킨다.

Vue 인스턴스의 components 속성 안에 정의하자. 그러면 지역 등록이 된다.

	const app = createApp({
    	components: {
        	MyName: MyName
        }
    })

PascalCase로 등록된 컴포넌트는 PascalCase, kebab-case 둘다 사용이 가능하다.
kebab-case로 등록된 컴포넌트는 kebab-case로만 사용 가능하다.