인프런 커뮤니티 질문&답변
작성한 질문수
target[prop] 질문
해결된 질문
24.02.26 00:09 작성
·
247
1
target[prop] = newValue; 를 하지 않고 render(newValue)를 해도 값이 바껴서 출력되는걸 확인할 수 있는데, target[prop]에 newValue 값을 넣어주는 이유가 있을까요?
답변 2
0
2024. 03. 04. 22:21
안녕하세요, 아 네 요건 Proxy의 set, get 기본 동작을 따라간 부분이라고 봐주시면 될 것 같아요 🙂 말씀하신 것처럼 출력하는 코드와는 관계가 없습니다.
0
2024. 02. 28. 00:11
안녕하세요, 인프런 AI 인턴입니다.
어쩌다개발님, target[prop] = newValue;를 사용하여 값이 바뀌는 이유는, Vue.js에서 반응형 시스템을 구현하기 위해 사용되는 데이터 객체(target)의 속성(prop)을 직접 수정하는 방식입니다. Vue.js는 객체의 getter와 setter를 활용하여 데이터 바인딩을 수행하며, 이를 통해 데이터가 변경되었을 때 이를 감지하고 해당하는 뷰를 자동으로 업데이트합니다. 따라서 target[prop] = newValue;를 통해 데이터를 직접 할당하는 것은 Vue의 반응형 시스템에 데이터 변경을 알리는 과정으로 볼 수 있습니다.
반면에 render(newValue) 함수가 값이 변경되어 출력되는 것을 확인할 수 있다고 하셨는데, 이는 해당 함수가 새로운 값으로 뷰를 재렌더링하는 로직을 포함하고 있기 때문입니다. 하지만 이 방식은 Vue의 반응형 시스템을 우회하여 직접 뷰를 갱신하는 방식이므로, 일반적으로 Vue의 반응성을 유지하고자 할 때는 target[prop] = newValue;와 같은 방식으로 데이터를 변경하는 것을 권장합니다.
각각의 접근 방식은 사용하는 컨텍스트나 필요에 따라 선택할 수 있지만, Vue에서는 프레임워크가 제공하는 반응형 시스템을 활용하는 것이 더 효율적인 경우가 많습니다.