[Vue.js] 컴포넌트

컴포넌트는 View, Data, Code의 세트라고 생각하면 된다. 컴포넌트 안에는 HTML 코드가 있고, 이 HTML 코드를 실행하기 위한 자바스크립트 코드 그리고 데이터가 존재한다.  컴포넌트의 가장 큰 특징은 재사용이 가능하다는 점이다.

 

1. 컴포넌트 구조

 

컴포넌트 구조를 이해한다는 것은 쉽게 말해서, 앞으로 작성해야 할 코드의 기본 구조를 만드는 것이다.

컴포넌트 구조에 해당하는 프로그램 코드를 갖는 vue파일을 작성하고 매번 vue기반 프로젝트를 할 때마다 해당 vue파일을 복사해서 사용한다. 

 

snippet은 특정 코드를 미리 작성하고 등록하여 단축키로 코드를 불러와서 바로 사용할 수 있는 기능이다. 

 

1) Snippet 설정

 

1. 파일 -> 기본설정 -> 사용자 코드 조각 구성 클릭

 

2. vue 검색후 Enter

 

3. Vue.json 파일이 열리면 컴포넌트의 기본 구조를 body에 넣어준다.

"Generate Basic Vue Code" : {
	"prefix": "vue-start",
	"body": [
		"<template>\n\t<main>\n\n\t</main>\n</template>\n<script>\nexport default {\n\tname: '',\n\tcomponents: {},\n\tdata() {\n\t\treturn {\n\t\t\texample: '',\n\t}\n},\n\tbeforeCreate() {},\n\tcreated() {},\n\tbeforeMount() {},\n\tmounted() {},\n\tbeforeUpdate() {},\n\tupdated() {},\n\tbeforeUnmount() {},\n\tunmounted() {},\n\tmethods: {}\n}\n</script>"
	],
	"description": "Generate Basic Vue Code"
}

 

2) Snippet 사용

 

src/views 폴도에 있는 About.vue파일을 열고, About.vue파일에 작성된 코드를 모두 지운다. 그런 다음 sta라고 입력하면 등록된 vue-start가 보이게된다.

 

3) Lifecycle Hooks

 

모든 컴포넌트는 생성될 때 초기화 단계를 거치게 된다. 예를 들어, 데이터의 변경사항 감시를 위한 설정, 템플릿 컴파일, 인스턴스를 DOM에 마운트하고, 데이터가 변경되면 DOM을 업데이트 해야 한다

 

Lifecycle Hooks 다이어그램 / 출처 : https://vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram

 

2. 데이터 바인딩

 

Vue는 양방향 데이터 바인딩을 지원한다. 이때 양방향 데이터 바인딩이란 모델(Model)에서 데이터를 정의 한뒤, 뷰(View)와 연결하면 모델과 뷰 중 어느 한쪽에 변경이 일어났을 때 다른 한쪽에 자동으로 반영되는 것을 의미한다.

 

데이터를 바인딩하는 경우

• 데이터가 html tag 안에 텍스트로 바인딩 되는 경우
• 데이터가 html tag의 속성으로 바인딩 되는 경우
• 데이터가 html의 Form element의 value에 바인딩 되는 경우
• 다중 데이터가 html의 다중 element를 생성하기 위해서 바인딩 되는 경우

 

 

---

참고 :  ⌜Vue.js 프로젝트 투입 일주일전⌟ 책을 공부하며 요약・정리한 내용입니다.

---