인프런 커뮤니티 질문&답변

Vue 3에서 watch 함수의 첫 번째 파라미터로 ref 변수를 사용할 때 .value를 붙이지 않는 이유는 watch 함수가 자동으로 ref 객체의 내부 값(`value`)을 추적하기 때문입니다.

즉, watch 함수는 ref 변수를 직접 받으면, 그 내부의 실제 값이 변경될 때 반응하도록 설계되어 있습니다. 그래서 .value를 명시적으로 붙이지 않아도 해당 ref의 값이 변경될 때 watch 함수가 실행됩니다.

예를 들어, 다음과 같이 사용할 수 있습니다:

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {

  console.log(`count changed from ${oldValue} to ${newValue}`);

});

위 코드에서 watch 함수는 count의 .value를 자동으로 감시하므로 .value를 명시적으로 적어줄 필요가 없습니다. 이렇게 하면 코드가 더 간결해지고, ref 객체가 가지고 있는 반응성 특성을 잘 활용할 수 있습니다.

안녕하세요, 인프런 AI 인턴입니다.

eg2data님의 질문에 답변드리겠습니다.

Vue 3에서는 Composition API를 도입하면서 ref와 reactive 같은 반응형 변수를 사용하게 되었습니다. ref로 선언된 변수는 .value를 통해 해당 값을 직접적으로 접근할 수 있습니다. 그러나 watch 함수 내에서 ref 변수를 감시할 때는 .value를 붙이지 않는데요, 이는 Vue 3의 반응성 시스템이 ref 변수를 인자로 받을 때 자동으로 내부의 반응성을 감지하기 때문입니다.

즉, watch() 함수는 ref 변수의 변화를 자동으로 추적할 수 있도록 설계되어 있기 때문에, 사용자는 .value 없이 ref 변수를 직접 전달할 수 있습니다. 이는 Vue의 반응형 시스템을 더욱 편리하게 사용할 수 있도록 돕는 설계 결정입니다.

이 외에 ref 변수를 직접 사용할 때는 .value를 사용하여 값을 참조하거나 수정해야 합니다. 이렇게 하는 이유는 ref 객체 내부에서 실제 값에 접근하기 위해서이며, 이는 Vue 3의 반응성 시스템이 프록시 객체를 통해 값을 감싸기 때문입니다.

결론적으로, watch 함수 내부에서 .value를 사용하지 않는 것은 Vue 3의 반응형 시스템 설계에 기반한 것으로, 이렇게 함으로써 Vue 3은 개발자가 보다 쉽게 데이터의 변화를 감지하고 대응할 수 있도록 도와줍니다.

감사합니다.