target[prop] 질문

Question

target[prop] = newValue; 를 하지 않고 render(newValue)를 해도 값이 바껴서 출력되는걸 확인할 수 있는데, target[prop]에 newValue 값을 넣어주는 이유가 있을까요?

captain · Answer

안녕하세요, 아 네 요건 Proxy의 set, get 기본 동작을 따라간 부분이라고 봐주시면 될 것 같아요 🙂 말씀하신 것처럼 출력하는 코드와는 관계가 없습니다.

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. 어쩌다개발님, target[prop] = newValue; 를 사용하여 값이 바뀌는 이유는, Vue.js에서 반응형 시스템을 구현하기 위해 사용되는 데이터 객체(target)의 속성(prop)을 직접 수정하는 방식입니다. Vue.js는 객체의 getter와 setter를 활용하여 데이터 바인딩을 수행하며, 이를 통해 데이터가 변경되었을 때 이를 감지하고 해당하는 뷰를 자동으로 업데이트합니다. 따라서 target[prop] = newValue; 를 통해 데이터를 직접 할당하는 것은 Vue의 반응형 시스템에 데이터 변경을 알리는 과정으로 볼 수 있습니다. 반면에 render(newValue) 함수가 값이 변경되어 출력되는 것을 확인할 수 있다고 하셨는데, 이는 해당 함수가 새로운 값으로 뷰를 재렌더링하는 로직을 포함하고 있기 때문입니다. 하지만 이 방식은 Vue의 반응형 시스템을 우회하여 직접 뷰를 갱신하는 방식이므로, 일반적으로 Vue의 반응성을 유지하고자 할 때는 target[prop] = newValue; 와 같은 방식으로 데이터를 변경하는 것을 권장합니다. 각각의 접근 방식은 사용하는 컨텍스트나 필요에 따라 선택할 수 있지만, Vue에서는 프레임워크가 제공하는 반응형 시스템을 활용하는 것이 더 효율적인 경우가 많습니다.