setter 함수 전개구문

Question

리엑트 객체 업데이트하기 강좌에 내용 중 질문입니다. const handleTitleChange = (e) => { setForm({ ...form, title: e.target.value, }); }; 이런 부분이 있는데요. ...form이 title:e.target.value 보다 앞서 나와야 정상 작동하더라구요. javascript 문법을 정확히 몰라서 그런건지 모르겠지만, 전개구문을 앞에 둬야 되는 이유(?)가 있을까요? 그냥 이렇게 사용하는거니 익숙해지면 되나요?

짐코딩 · Answer

안녕하세요! 😊 JavaScript 객체의 속성 덮어쓰기 규칙 때문입니다. JavaScript에서는 같은 키가 여러 번 나오면 마지막 값이 덮어쓰여 져요! // 현재 form 상태가 이렇다고 가정해볼게요 const form = { title: "기존 제목", content: "기존 내용" }; // ✅ 올바른 방법 (전개구문 먼저) const newForm = { ...form, // 기존 모든 값 복사 title: "새로운 제목" // title만 새 값으로 덮어쓰기 }; // 결과: { title: "새로운 제목", content: "기존 내용" } // ❌ 잘못된 방법 (전개구문 나중에) const wrongForm = { title: "새로운 제목", // 이 값을 설정했지만... ...form // 전개구문이 다시 덮어버림! }; // 결과: { title: "기존 제목", content: "기존 내용" } 이 패턴은 React에서 표준 방식 이니까 계속 사용하시다 보면 자연스럽게 손에 익으실 거예요! 👍

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 택군님. 질문하신 코드와 관련된 내용은 JavaScript의 전개 구문(Spread syntax)과 객체 병합에 대한 것입니다. 이 구문을 이해하는 것은 React에서 효율적으로 상태를 관리하고 업데이트하는 데 매우 중요합니다. 전개 구문과 객체 병합 전개 구문 ...form 을 사용하면 form 객체의 모든 프로퍼티를 현재 위치에 복사합니다. 이는 객체를 복사하거나 새 객체로 병합할 때 사용됩니다. 객체 병합에서 나중에 나오는 키의 값이 앞의 키의 값을 덮어씌우게 됩니다. 즉, { ...form, title: e.target.value } 는 기존 form 의 내용을 복사한 후, title 프로퍼티의 값을 e.target.value 로 덮어씌웁니다. 왜 전개 구문이 앞에 와야 하는가? 전개 구문 ...form 이 앞에 오는 이유는 기존 객체의 내용을 먼저 복사한 후, 변경하려는 프로퍼티( title )를 덮어씌우기 위해서입니다. 만약 순서를 바꾸면, 이전에 설정한 title 값이 전개 구문에 의해 덮어써져 버리기 때문에, 변화가 반영되지 않습니다. 결론 이 패턴을 통해 객체 안에서 특정 프로퍼티만 업데이트하고 나머지 프로퍼티는 그대로 유지할 수 있습니다. 이를 통해 상태를 일관성 있게 관리할 수 있습니다. 이러한 사용법에 익숙해지면 React에서의 상태 관리를 보다 효과적으로 수행할 수 있습니다. 관련 참고 자료는 다음과 같습니다: - Understanding Spread Syntax and Object Cloning in JavaScript - React State Management and Spread Syntax 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.