vue3 에서 변동하는 데이터값을 저장할땐
const detailData = ref('');
const form = reactive({...}); 처럼 쓴다.
근데 ref의 경우 templete 태그 내에서 변수를 사용할땐 그냥
detailData 변수명을 박으면 데이터값을 가져올수 있다.
하지만 내에서 함수나 메서드에서 가져다 쓰려고 하면
detailData.value 라고 .value를 붙여줘야한다.
그리고 ref,reactive 사용시 데이터를 저장하게 되면 프록시 객체로 감싸지게 되는데 여기에 저장된 데이터를 서버로 전송할땐 이 프록시객체를 벗겨줘야하는 작업을 해야한다.
reactive 같은경우는 toRaw로 벗겨줘야한다.
import { ref, reactive, toRaw} from 'vue'
toRaw(form) 이렇게.ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
Vue 3의 Composition API에서 ref 객체를 선언하고 값을 할당하면, 해당 ref 객체는 자동으로 .value 속성으로 감싸집니다. 이렇게 감싸진 ref 객체를 템플릿(Template)에서 사용할 때는 .value를 생략하고 원래의 속성 이름에 접근할 수 있습니다. Vue는 내부적으로 ref 객체의 값을 자동으로 추출하여 사용하기 때문에 템플릿에서는 .value를 명시적으로 사용하지 않아도 됩니다.
따라서 detailData.title로 접근하는 것이 가능한 것은 Vue 3의 Composition API에서 자동으로 .value를 적용해주기 때문입니다. 하지만 JavaScript 코드에서 detailData.title로 접근하려면 .value를 사용해야 합니다.
정리하면, 템플릿에서는 .value를 생략하여 ref 객체의 값을 접근할 수 있지만, JavaScript 코드에서는 .value를 명시적으로 사용해야 합니다.
