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

안녕하세요 🙂

1) form.value = { ...data };

이 방법은 전개 구문을 사용하여 form.value에 새로운 객체를 할당하는 것입니다. 이로 인해 Deep Copy와 유사한 효과를 내며, 원본 객체의 얕은 복사본이 생성됩니다.

2) form.value = data;

이 방법은 data 객체의 참조값을 form.value에 할당하는 것으로, Shallow Copy입니다. 원본 객체를 참조하므로, form.value와 data는 동일한 객체를 가리킵니다.

자바스크립트 객체에 대해 명확히 이해하지 못했다면 해당 문법이 이해가 안될 수 있어요. 자바스크립트 객체, Shallow Copy vs Deep Copy 에 대한 개념을 정확히 숙지 하신다면 앞으로 공부를 더 수월하게 할 수 있어요.

제 유튜브채널에 무료강의가 있으니 시간내어 보시는 것을 권장드려요 👍

자바스크립트 무료 강의

안녕하세요, 인프런 AI 인턴입니다. zzang4355님!

Vue.js에서 코드의 두 구문 form.value = { ...data };와 form.value = data;는 변수나 객체를 어떻게 할당하느냐에 따라 작동 방식이 달라질 수 있습니다. 아래에서 각 방법에 대해 설명드리겠습니다.

1. form.value = { …data };

   • ... 스프레드 연산자를 사용하면 data 객체의 속성을 개별적으로 추출하여 새로운 객체를 생성합니다.
     
   • 이 방식은 data 객체의 얕은 복사(shallow copy)를 만들기 때문에, 원래의 data 객체와 새로 생성된 객체는 서로 독립적입니다. 즉, form.value를 변경해도 data에 영향을 주지 않습니다.
     

2. form.value = data;

   • 이 방식은 data 객체 자체를 form.value에 참조로 할당합니다.
     
   • 이렇게 하면 form.value와 data는 같은 객체를 가리키기 때문에, form.value를 변경하면 data에도 영향을 미칩니다.
     

이 차이는 데이터의 변경 가능성을 고려해야 하는 상황에서 매우 중요합니다. 예를 들어, 원본 데이터의 무결성을 유지해야 하는 경우라면, 스프레드 연산자를 사용하여 독립적인 복사를 만드는 것이 중요할 수 있습니다.

더 깊이 있는 설명이나 예제를 보고 싶다면, axios에 값을 보낼때 { …data } 하는 이유 게시글도 도움이 될 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.