[Vue] ref

개요

Vue 3에서 ref는 Composition API의 핵심 기능 중 하나다. 이 기능은 데이터를 반응형으로 만들어, 해당 데이터의 변화가 Vue의 렌더링 시스템에 자동으로 반영되게 한다. ref를 사용하면 단일 값이나 객체를 Vue의 반응형 시스템에 통합할 수 있다.

기본 사용법

ref를 사용하여 반응형 변수를 생성하려면, ref 함수를 호출하고 초기 값을 설정한다. 생성된 ref 객체는 .value 속성을 통해 내부 값에 접근하고 수정할 수 있다. 아래 예시에서 count는 ref를 사용하여 생성된 반응형 변수다.

<script setup>
import { ref } from 'vue';

const count = ref(0);

function increment() {
    count.value++;
}
</script>

<template>
    <button @click="increment">Increment</button>
    <p>Count is: {{ count }}</p>
</template>

Vue 템플릿에서 ref로 생성된 변수를 사용할 때는 .value를 사용하지 않아도 된다. Vue의 컴파일러가 이를 자동으로 처리한다.

DOM 요소에 대한 참조

ref는 DOM 요소나 컴포넌트 인스턴스에 대한 참조를 생성하는 데도 사용된다. 아래 예시에서 myDiv는 템플릿 내의 <div> 요소를 참조한다.

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

const myDiv = ref(null);

onMounted(() => {
    console.log(myDiv.value); // DOM 요소에 접근
});
</script>

<template>
    <div ref="myDiv">Hello World</div>
</template>

결론

Vue 3에서 ref는 단일 값의 반응형 관리, DOM 요소 및 Vue 컴포넌트에 대한 참조 생성, 그리고 Composition API에서의 상태 관리에 있어 핵심적인 역할을 한다. 이를 통해 개발자는 Vue 애플리케이션의 상태와 DOM 요소를 보다 효과적으로 관리하고 조작할 수 있다.