[Vue2] 몰라도 되지만 알면 이득인 Vue2 기능2

1. Props 추가 설정

• props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달해줄 때 필요한 옵션
• 총 4가지 옵션을 추가적으로 설정해줄 수 있음(type, required, default, validator)

props: ["dataName", "dataName2"]

props: {
	dataName: Number
}

1. 데이터 타입 설정

props: {
	dataName: {
    	type: Number
    },
    dataName2: {
    	type: [Number, String]
    }
}

• 배열 형태로 Number, String ... 다수의 타입 지정도 가능

2. 필수 값 여부 설정

props: {
	data: {
    	type: Number,
        required: true
    }
}

• 데이터의 필수 여부 true 또는 false로 지정 가능

3. 기본 값 설정

props: {
	data: {
    	type: Number,
        default: 1
    }
}

props: {
	data: {
    	type: Array,
        default: () => {
        	return [1, 2, 3]
        }
    }
}

• 데이터 타입이 숫자나 문자열일 경우 기본 값 설정(default: 1, default: "hi") -> 표현식 없이 기본 값 입력
• 배열이나 객체의 기본 값은 함수로부터 반환되어야 함(default: () => {}) -> 함수 표현식을 사용

4. 벨리데이터 설정

props: {
	data: {
    	type: Number,
        required: true,
        defalut: 1,
        validator: (value) => {
        	return value > 0
        }
    }
}

• 벨리데이터를 설정하여 별도의 유효성 검사 가능
• 유효하지 않은 값이 오면 오류 발생
  Invalid prop: custom validator check failed for prop "type"

props 옵션 사용 시 장점?

• props의 추가 속성을 지정해주면 더 정확한 데이터 전달과 타입 추론이 가능해짐 -> 추후 데이터 때문에 문제가 생길 확률이 줄어듦

2. nested 데이터 watch(감시)하기

• watch란 특정 데이터 변경을 감지해서 로직을 자동으로 수행해주는 속성

1. deep 속성 사용하기

<script>
    data() {
        return {
            accountInfo: {
                name: "홍길동",
                age: 25,
            }
        }
    },
    watch: {
        accountInfo: {
            handler() {
                console.log("watched accountInfo");
            },
            deep: true,
        }
    }
</script>

• 데이터가 객체일 경우 객체의 하위 값들의 변경을 감지하고 싶은 경우 deep 옵션을 true로 지정해주면 watch가 동작함

<script>
    watch: {
        accountInfo: {
            handler() {
                console.log("watched accountInfo");
            },
            deep: true,
            immediate: true,
        }
    }
</script>

• immediate 옵션을 true로 지정해주면 컴포넌트가 생성되는 즉시 실행됨

2. 쿼테이션안에 특정 값 지정하기

<script>
    watch: {
        "accountInfo.age"() {
            console.log("watched accountInfo");
        }
    }
</script>

• deep을 사용하지 않고 따옴표 안에 객체의 특정 키 값을 정의해주면 watch가 동작함

차이점?

• deep 옵션 사용 시에는 객체 안 모든 하위 값의 변경을 감지하고, 따옴표 표현식은 오브젝트 특정 키 값을 지정해서 특정 데이터 변경을 감지해줄 수 있다.

3. Ref 속성

• Ref 속성은 DOM에 직접 접근하여 엘리먼트를 컨트롤하고 싶을 때 사용하는 기능이다.(id와 같은 기능, 중복 불가능) 자바스크립트에서 getElementById나 querySelector 함수와 같은 역할을 한다.
• 부모 컴포넌트에서 자식의 데이터, 함수를 사용하고 싶을 때 $emit 대신 사용 가능
• ref로 속성 명을 지정
• this.refs로 접근 가능

// Parent.vue
<template>
	<Child ref="child" />
</template>
<script>
import Child from "@/components/child.vue"
	name: "Parent",
    components: {
    	Child,
    },
    mounted() {
    	// 자식 컴포넌트에 접근
    	this.$refs.child;
    }
</script>

// Child.vue
<template>
	<!-- 자식 컴포넌트의 button 태그에 ref 속성 지정 -->
	<button ref="btn" @click="clickEvent()">버튼</button>
</template>
<script>
	name: "Child",
    methods: {
    	clickEvent() {
        	console.log("클릭 이벤트 발생");
        }
    }
</script>

// Parent.vue
<template>
	<Child ref="child" />
</template>
<script>
import Child from "@/components/child.vue"
	name: "Parent",
    components: {
    	Child,
    },
    mounted() {
    	this.$refs.child.clickEvent();
        // 클릭 이벤트 발생
        this.$refs.child.$refs.btn.click();
        // 클릭 이벤트 발생
    }
</script>

• 자식 컴포넌트의 메소드 호출 가능
• $refs로 자식 컴포넌트의 ref 속성을 가진 엘리먼트에 접근 가능
• 참고로 자식 컴포넌트에서 this.$parent로 부모 컴포넌트에 접근 가능

ref 속성 사용 시 장점?

• $emit의 사용없이 자식 컴포넌트 요소에 쉽게 접근이 가능하다.

유의사항

• DOM에 직접 접근을 지양한다는 Vue의 목적에 위배
• 컴포넌트가 랜더링된 이후에 접근이 가능(mounted 후에 접근 가능)
• 직접 접근하는 방식이라 상태를 추적하기 어렵기 때문에 정말 필요할 때 사용하기를 권장