-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
state 와 v-model에 대해서 질문이 있습니다.
23.10.24 22:22 작성 23.10.24 22:27 수정 조회수 186
0
강의 내용 TodoInput.vue 파일 중
<input type="text" v-model="newTodoItem" v-on:keyup.enter="addTodo">부분에 v-model="newTodoItem" 을 사용하였습니다.
이는 data 속성에 사용되었는데
<input v-model="newTodoItem">
computed:{
...mapState(['newTodoItem'])
}
다음과 같은 느낌으로 v-model은 왜 state를 사용하지 않는 이유가 따로 있는지 궁금합니다!
개인적으로 실험해봤을 때는 readonly로만 사용하라고 되어있는데 스택오버플로에선 사용한 사람도 있는 것 같기도 하고 무엇이 맞는지 궁금해용
답변을 작성해보세요.
1
인프런 AI 인턴
2023.10.26
안녕하세요 ㅊㅇㅌ 님, 인프런 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 속성을 통해 사용하는 것이 일반적인 패턴입니다. 감사합니다!
답변 1