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

안녕하세요? 항상 좋은 강의 감사드립니다🙂

아래와 같은 상황에서 warning이 발생하고 있는데 답변주시면 정말 감사하겠습니다 ㅠㅠ

1. 부모 컴포넌트에서 자식 컴포넌트로 prop으로 값을 넘겨줌
   <ChildVue

   v-model:my-value="value"

   />
   <script setup>
   import { ref } from "vue";
   const value = ref("");
   </script>

2. 자식 컴포넌트에서 toRef를 이용하여 반응성을 잃지 않도록 구조분해 할당
   import { toRef } from "vue";
   const props = defineProps({

   myValue: String,

   });

   const myValueInput = toRef(props, "myValue");

3. 구조분해 할당한 반응형 변수를 자식 컴포넌트 내 text input에 binding. 입력값이 변경되는 경우 emit을 통해 업데이트
   <input type="text"

   @input="$emit('update:myValue', $event.target.value)"

   v-model="myValueInput" />

위와 같이 개발을 하니 제가 생각했던대로 동작은 잘 하는데요... 계속 아래와 같은 warning이 뜨고 있습니다 ㅠㅠ

reactivity.esm-bundler.js:4 [Vue warn] Set operation on key "myValue" failed: target is readonly.

강의에서 짚어주신 점들(자식 컴포넌트 내부에서 props 직접변경 X, 반응형을 잃지 않는 구조분해 할당 등)을 제 나름대로 고려했는데 왜 저런 warning이 지속적으로 뜨는 걸까요...?

답변주심 정말 감사드리겠습니다 ㅠㅠ

+) 혹시 다음 강의 계획은 어떻게 되시나요?