1. Props 추가 설정
- props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달해줄 때 필요한 옵션
- 데이터 타입 설정
props: {
data: Number
}props: {
data: {
type: Number
}
}- 두 가지 형태로 타입 지정 가능
- 배열 형태로 [Number, Array] 여러가지 타입 지정 가능
- 필수 값 여부 설정
props: {
data: {
type: Number,
required: true
}
}- 데이터의 필수 여부 true/false로 지정 가능
- 기본 값 설정
props: {
data: {
type: Number,
required: true,
defalut: 1
}
}props: {
data: {
type: Array,
required: true,
defalut: () => {
return [1, 2, 3]
}
}
}- 데이터 타입이 문자열이나 숫자일 경우 기본 값 설정(defalut: 1, defalut: "hi") => 표현식 없이 기본 값 입력
- 배열이나 객체의 기본 값은 함수로부터 반환되어야 함(defalut: () => {}) => 함수 표현식을 사용
- 벨리데이터 설정
props: {
data: {
type: Number,
required: true,
defalut: 1,
validator: (value) => {
return value > 0
}
}
}- 벨리데이터를 설정하여 별도의 유효성 검사 지정 가능
props 옵션 사용 시 장점?
- props의 추가 속성을 지정해주면 더 정확한 데이터 전달과 타입 추론이 가능해짐 => 추후 데이터 때문에 문제가 생길 확률이 줄어듦
2. nested 데이터 watch(감시)하기
- watch란 특정 데이터 변경을 감지해서 로직을 자동으로 수행해주는 속성
- deep 속성 사용하기
data() {
return {
accountInfo: {
name: "홍길동",
age: 25
}
}
},
watch: {
accountInfo: {
handler() {
console.log("watched accountInfo");
},
deep: true
}
}- 데이터가 객체일 경우 하위 값들의 변경을 감지하고 싶은 경우 deep 옵션을 true로 지정해주면 watch가 동작함
watch: {
accountInfo: {
handler() {
console.log("watched accountInfo");
},
deep: true,
immediate: true
}
}- immediate 옵션을 true로 지정해주면 컴포넌트가 생성되는 즉시 실행됨
- 쿼테이션안에 특정 값 지정하기
watch: {
"accountInfo.age"() {
console.log("watched accountInfo");
}
}- deep을 사용하지 않고 따옴표 안에 객체의 특정 키 값을 정의해주면 watch가 동작함
차이점?
- deep 옵션 사용 시에는 객체 안 모든 하위 값의 변경을 감지하고, 따옴표 표현식은 오브젝트 특정 키 값을 지정해서 특정 데이터 변경을 감지해줄 수 있다.
3. Mixin 기능
- 믹스인(mixin)은 여러 컴포넌트 간에 공통적으로 사용하고 있는 로직, 기능들을 재사용하는 방법이다.
dialog.js
<script>
export const DialogMixin = {
data() {
return {
dialog: false,
};
},
mounted() {
this.dialog = true;
},
methods: {
closeDialog() {
this.dialog = false;
},
},
};
</script>- 구조는 일반 vue 스크립트와 동일
Home.vue
<template>
//...생략
<div class="dialog" v-if="dialog">
<button @click="closeDialog">X</button>
</div>
</template>
<script>
import { DialogMixin } from "@/mixin/dialog.js";
export default {
name: "Home",
mixins: [ DialogMixin ],
}
</script>- mixins 옵션 안에 import한 dialog.js를 배열 형태로 정의
- 믹스인 사용할 시 일반 라이프 사이클 훅과 동일하게 동작
- 라이프 사이클이 겹칠 경우, dialog.js의 라이프 사이클이 먼저 실행되고 난 후 vue 컴포넌트의 라이프 사이클이 실행됨
- dialog.js의 데이터 및 메소드 등은 this에 바인딩 됨
- 믹스인에서 선언한 변수/기능의 이름과 vue에서 선언된 변수/기능의 이름이 동일하면 믹스인의 코드를 무시하고 vue에서 선언된 코드 사용
Mixin의 장점?
- 컴포넌트의 코드가 간결해지고(중복 제거) 유지보수와 재활용성이 높아진다.
Mixin의 단점?
- 다중 믹스인을 상속 시 컴포넌트 관리가 어려워진다.(특정 코드가 어떤 믹스인에서 온 것인지 파악하기 어려움)
- 하나의 컴포넌트 안에 다중 로직 작성 시 가독성이 떨어지고 복잡해짐
