vue의 ref 사용법

vue 코드를 수정하던 도중 ref 관련해서 궁금한 점이 생겼다.

const _model: Ref<string> = ref( props.text || props.modelValue );
  /**
   * input 에서 포커스를 잃었을 때 이벤트 발생, 이벤트 발생
   *
   * @param {String} eventName  - 이벤트 이름
   * @param {string} inputValue - 입력 값
   * */
  ( eventName: "onBlur", inputValue: string): void;
  
  onBlur() {

    validator.onBlur( computed( () => {
      return _model.value;
    } ) );
    BaseInputEvent( "onBlur", _model.value );
    BaseInputEvent( "onBlurModel", _model );
  },

const onUpdateInputModelByBlur = ( inputModel ) => {
console.log( '<< inputModel >>' , inputModel );
inputModel.value = getRenderInputByUpdate( inputModel.value );
}

<BaseInput
	@on-blur-model="onUpdateInputModelByBlur"
/>

이렇게 코드를 작성하고 보니,
BaseInputEvent에서 _model.value를 활용할 때도 있고, _model을 활용하는 경우도 있는 것이다.

찾아보니 이는 ref의 특성 때문인데,
ref 객체는 Vue의 반응형 시스템을 지원하는 래퍼로, 값(value)를 Ref 객체의 value 프로퍼티 안에 저장하고 있다.

그러면? _model은 ref 객체, _model.value는 객체의 내부 값 자체인 것.

때문에, _model을 활용하면 반응형으로 화면의 값을 변경할 수 있지만 _model.value를 활용하면 값 자체만 전달해주는 것이기 때문에 값을 사용하기만 하게 되고 반응형으로 화면이 바뀌지는 않는 것이다.

ref에 대한 추가 학습

ref는 개발자가 마운트된 특정 DOM 엘리먼트 또는 자식 컴포넌트 인스턴스에 직접적인 참조를 얻을 수 있도록 하는 속성이다.

vue3가 되면서 새로운 기능이 추가되었다고 한다.
vue3 이전에는 DOM 또는 컴포넌트를 가리키는 속성이었지만, vue3에서는 reactive reference를 의미한다.

1. 간편한 변수 선언

vue3에서는 ref를 변수를 선언하는데 사용할 수 있다.

import { ref } from "vue";

const count = ref(0);

console.log(count); // { value: 0 }
console.log(count.value); // 0

counter.value++;
console.log(count.value); // 1

ref로 변수를 선언하는 이유?

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

const data = ref(null); // ✅ ref로 선언

async function fetchData() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    data.value = await response.json();
  } catch (error) {
    console.error("데이터 로딩 실패", error);
  }
  return data.value; // ✅ 값 유지
}

fetchData().then(result => console.log(result)); // { id: 1, title: "...", ... }
</script>

• 비동기 로직에서 ref()를 사용하면 값을 안정적으로 유지할 수 있음
• data를 let으로 선언하면 함수가 끝난 후 소멸하지만, ref()는 유지된 상태로 반환될 수 있음
• 반환 후에도 객체 참조가 가능하므로, 외부에서 값 변경 가능
  => vue3에서는 ref()를 변수처럼도 활용할 수 있고, 유지해야 할 값이나 참조가 필요한 경우 유용하게 사용할 수 있다!

2. 반응형 데이터 제공

vue3에서 ref는 변수를 반응형 데이터로 만들어준다.
따라서 ref로 선언된 변수의 값이 변경되면, 해당 값을 사용하는 vue 컴포넌트의 뷰로 자동으로 업데이트된다.

단, 객체의 경우 ref로 감싸면 해당 객체가 변경되어도 참조는 변경되지 않는다.
이는 즉, 참조가 변경되어도 반응성이 없어 객체의 변경을 감지하는 데 한계가 있다.

3. ref 속성을 활용한 변수 접근

vue3에서 ref는 변수에 접근하는 데 사용될 수 있는 value 속성을 가진다.

import { ref } from 'vue';

const count = ref(0);

console.log(count.value); // 0

4. 컴포넌트 레퍼런스 제공

vue3에서 ref는 컴포넌트에 대한 레퍼런스를 제공할 수 있다.