[vue.js] 컴포넌트 기초

1. 컴포넌트

view + data + javascript

- views 폴더에 페이지 담당 vue 컴포넌트 파일 생성

- components 폴더에 다른 vue 파일에서 호출해서 공통으로 사용할 수 있는 vue 컴포넌트 파일 생성

 

2. 컴포넌트 구조

1) 기본 구조

기본 프로퍼티: name, components, data, computed

라이프사이클 훅: 메소드 등

<template>
    <div></div>
</template>
<script>
    export defulat {
        name: '', //컴포넌트 이름
        components: {}, //다른 컴포넌트 사용시 컴포넌트를 import해 배열로 저장
        data(){ //html과 자바스크립트 코드에서 사용할 데이터 변수 선언
            return {
                sampleData: ''
            };
        },
        setup() {}, //컴포지션 API
        created() {}, //컴포넌트가 생성되면 실행
        mounted() {}, //template에 정의된 html 코드가 랜더링 된 후 실행
        unmounted() {}, //컴포넌트를 빠져나갈 때
        methods: {} //컴포넌트 내에서 사용할 메소드 정의
    }
</script>

 

• <template>: html 코드 작성
• name: 컴포넌트 이름(필수 x)
• components: 외부 컴포넌트 사용시 해당 컴포넌트를 import한 후 components에 배열로 등록
• data: html 코드와 자바스크립트 코드에서 전역 변수로 사용할 데이터 선언. this로 접근
• setup: 컴포지션 API를 구현하는 메소드
• created: 컴포넌트 생성시 실행
• mounted: 템플릿에 작성한 html 코드가 랜더링 된 후 실행
• unmounted: 컴포넌트를 빠져나갈 때 실행
• methods: 컴포넌트 내에서 사용할 메소드 정의. this로 접근

vue 프로젝트 개발시 반드시 작성해야 하는 코드이다.

 

 

2-1. snippet 기능

vs code에서 제공

코드를 등록해놓고 불러와서 사용할 수 있는 기능

[File] → [Preference] → [Configure Snippets]

Snippets 파일 유형에서 vue 선택

 

snippet 작성

{
	"Generate Basic Vue Code" : {
		"prefix": "vue-start",
		"body": [
			"<template></template>\n<script>\nexport default {\n\tname:'',\n\tcomponents:{},\n\tdata(){\n\t\treturn{\n\t\t\tsampleData:''\n\t\t};\n\t},\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"
	}
}

 

저장 후 vue 파일에서 prefix 입력시 자동완성 목록에 나옴

 

 

2-2. 라이프사이클 훅

 

라이프사이클 다이어그램

91p

 

활용(화면 로딩 속도 개선)

- created(): 제일 먼저 보여줘야 하는 데이터 영역을 정의, 서버로부터 미리 받아옴

- mounted(): 화면 로딩 이후에 삽입되어도 되는 데이터, html, 객체 부분을 정의

 

 

3. 데이터 바인딩

양방향 데이터 바인딩: 모델에서 데이터를 정의한 후 뷰와 연결하면 한 쪽이 변경됐을 때 다른 한쪽에 자동으로 반영되는 것

가능한 경우

- 데이터가 html tag 안에 텍스트로 바인딩

- 데이터가 html tag의 속성(attribute)으로 바인딩

- 데이터가 html의 Form element의 value에 바인딩

- 다중 데이터가 html의 다중 element를 생성하기 위해 바인딩

 

3.1. 데이터 바인딩 실습

3.1.1. 준비

1) src/views 폴더에 DataBindig.vue 파일 생성

<template>
    <h1>Hello, {{title}}!</h1>
</template>
<script>
export default {
    data(){
        return{
            title: 'World'
        };
    }
}
</script>

data에 정의되는 데이터를 이중 괄호({{}})로 html 데이터에 바인딩한다.

 

2) 반영 확인(이후 이 과정은 생략)

DataBinding.vue 파일 라우터에 등록

router/index.js에 추가

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import DataBinding from '../views/DataBinding.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/databinding',
    name: 'DataBinding',
    component: DataBinding
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

 

App.vue에 DataBinding.vue 링크 추가

  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> | 
    <router-link to="/databinding">Data Binding</router-link>
  </nav>

 

3.1.2. 문자열 데이터 바인딩

이중 중괄호 방식

html 태그가 아니라 텍스트로 인식된다.

 

3.1.3. raw html 데이터 바인딩

v-html 디렉티브 사용

 

DataBinding.vue

<template>
    <div>{{htmlString}}</div>
    <div v-html="htmlString"></div>
</template>
<script>
export default {
    data(){
        return{
            htmlString: '<p style="color:red;">This is a red string.</p>'
        };
    }
}
</script>

 

3.1.4. Form 입력 데이터 바인딩

*v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송한다.

 

1)input type=text

data()에 정의된 데이터 키명을 v-model에 넣음

<template>
    <div><input type="text" v-model="valueModel"/></div>
</template>
<script>
export default {
    data(){
        return{
            valueModel: 'South Korea'
        };
    }
}
</script>

 

사용자가 input type=text 객체의 텍스트를 입력해서 변경하면 모델인 data의 valueModel에 사용자가 입력한 텍스트가 저장된다.

 

2) input type=number

v-model.number

<template>
    <div><input type="number" v-model.number="numberModel"/></div>
</template>
<script>
export default {
    data(){
        return{
            numberModel: 3
        };
    }
}
</script>

 

3) textarea

<template>
    <div><textarea v-model="message"/></div>
</template>
<script>
export default {
    data(){
        return{
            message: "여러 줄 입력"
        };
    }
}
</script>

 

4) select

 

 

 

 

3.2. computed와 watch

3.2.1. computed

export default{
    data(){
        return {
            firstName: 'Yang-i',
            lastName: 'Go'
        };
    },
    computed: {
        fullName(){
            return this.firstName + ' ' + this.lastName;
        }
    }
}

 

export: 다른 파일에서 코드를 사용할 수 있게 함

data(): vue 컴포넌트의 상태(state)를 정의하는 메서드

- 컴포넌트 내에서 사용할 데이터 속성이 포함된 객체를 반환하고 있음

- 같은 컴포넌트 내에서 this.firstName, this.lastName으로 값 참조

computed: 계산된 속성을 정의하는 객체

- 정의된 속성에 사용되는 값이 변경될 때마다 동적으로 값을 설정해서 캐싱함

 

computed 값 사용

1. 템플릿 내에서 사용

<p>Full Name: {{ fullName }}</p>

 

2. 자바스크립트 코드에서 사용

console.log(this.fullName);

 

3. HTML 속성에 바인딩

<img :alt="fullName" src="profile.jpg" />

 

4. 동적 클래스/스타일에 사용

<div: class="{highlighted: fullName === 'Go Yang-i'}">
    Full name: {{fullName}}
</div>

 

 

3.2.2. watch

지정된 대상의 값이 변경될 경우 정해진 함수 실행

export default{
    data(){
        return {
            firstName: 'Yang-i',
            lastName: 'Go',
            fullName: ''
        };
    },
    watch:{
        firstName(){
            this.fullName = this.firstname + ' ' + this.lastName;
        },
        lastName(){
            this.fullName = this.firstName + ' ' + this.lastName;
        }
    },
    methods: {
        changeName(){
            this.firstName = 'Deung-eo';
        }
    }
}

 

watch

- firstName과 lastName이 변경될 때 fullName 업데이트

methods: 컴포넌트 내에서 호출 가능한 메서드를 정의함