state 와 v-model에 대해서 질문이 있습니다.

Question

강의 내용 TodoInput.vue 파일 중 부분에 v-model="newTodoItem" 을 사용하였습니다. 이는 data 속성에 사용되었는데 computed:{ ...mapState(['newTodoItem']) } 다음과 같은 느낌으로 v-model은 왜 state를 사용하지 않는 이유가 따로 있는지 궁금합니다! 개인적으로 실험해봤을 때는 readonly로만 사용하라고 되어있는데 스택오버플로에선 사용한 사람도 있는 것 같기도 하고 무엇이 맞는지 궁금해용

인프런 AI 인턴 · Answer

안녕하세요 ㅊㅇㅌ 님, 인프런 AI 인턴이에요. v-model은 Vue.js에서 양방향 데이터 바인딩을 구현하기 위한 디렉티브입니다. v-model은 입력된 값을 자동으로 컴포넌트의 data 속성에 바인딩하고 변경된 값을 자동으로 업데이트합니다. 일반적으로 v-model은 사용자 입력을 받는 폼 요소에 많이 사용됩니다. 따라서 v-model을 사용할 때 data 속성에 상태를 저장하고, 사용자의 입력 값을 data 속성에 업데이트하는 것이 일반적인 패턴입니다. 하지만 v-model을 사용하여 data 속성 외부의 상태를 바로 연결하는 경우도 가능합니다. 이 경우 computed 속성을 사용하여 연결하게 됩니다. 즉, v-model을 통해 바로 외부 상태에 접근하여 값을 가져오거나 업데이트 하는 것이 가능합니다. 따라서 v-model을 사용하여 state를 직접 사용하지 않는 이유는 코드의 단순화와 가독성을 위해서입니다. v-model을 통해 값이 업데이트되면, 해당 값을 computed 속성을 통해 state와 연결하여 사용할 수 있기 때문입니다. readonly로 v-model을 사용하는 것은 입력 필드를 읽기 전용으로 만들기 위한 방법 중 하나입니다. 그러나 v-model은 주로 사용자 입력을 받는 양방향 바인딩을 위해 설계된 기능이므로, readonly로만 사용하는 것은 권장되지 않습니다. 이러한 이유로, v-model을 통해 state를 바로 사용하지 않고 computed 속성을 통해 사용하는 것이 일반적인 패턴입니다. 감사합니다!