$refs in vue3

vue3의 setup에서 $refs를 활용해보자

vue2

<template>
	<div>
    	<h1 ref="sample">Hello World!</h1>
    </div>
</template>

<script>
export default {
	...
    methods: {
    	getH1() {
        	console.log(this.$refs.sample);		//<h1>Hello World!</h1>
        }
    }
}
</script>

vue3

<template>
	<div>
    	<h1 ref="sample">Hello World!</h1>
    </div>
</template>

<script>
import {ref, onMounted} from 'vue';

export default {
	...
    setup() {
    	//ref명과 동일한 변수를 선언
    	const sample = ref();
    	const getH1 = () => {
        	console.log(sample.value);	
        };
        //mount 이후 할당됨
        onMounted(() => {
        	getH1();	//<h1>Hello World!</h1>
        });
        
        //외부에서 쓰지 않더라도 return에 넣어야 정상적으로 할당
        return {
        	sample
        }
    }
}
</script>

1. template쪽은 vue2와 동일
2. ref()를 이용해 template의 ref명과 동일한 변수를 선언
3. mount 이후 할당됨
4. 꼭! return해줘야 함