setter 함수 전개구문

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

객체 업데이트 하기

작성

리엑트 객체 업데이트하기 강좌에 내용 중 질문입니다.

  const handleTitleChange = (e) => {
    setForm({
      ...form,
      title: e.target.value,
    });
  };

이런 부분이 있는데요.
...form이 title:e.target.value 보다 앞서 나와야 정상 작동하더라구요. javascript 문법을 정확히 몰라서 그런건지 모르겠지만, 전개구문을 앞에 둬야 되는 이유(?)가 있을까요? 그냥 이렇게 사용하는거니 익숙해지면 되나요?

react

답변 2

짐코딩

지식공유자

안녕하세요! 😊

JavaScript 객체의 속성 덮어쓰기 규칙 때문입니다.

JavaScript에서는 같은 키가 여러 번 나오면 마지막 값이 덮어쓰여져요!

// 현재 form 상태가 이렇다고 가정해볼게요
const form = { title: "기존 제목", content: "기존 내용" };

// ✅ 올바른 방법 (전개구문 먼저)
const newForm = {
  ...form,               // 기존 모든 값 복사
  title: "새로운 제목"    // title만 새 값으로 덮어쓰기
};
// 결과: { title: "새로운 제목", content: "기존 내용" }

// ❌ 잘못된 방법 (전개구문 나중에)
const wrongForm = {
  title: "새로운 제목",   // 이 값을 설정했지만...
  ...form               // 전개구문이 다시 덮어버림!
};
// 결과: { title: "기존 제목", content: "기존 내용" }

이 패턴은 React에서 표준 방식이니까 계속 사용하시다 보면 자연스럽게 손에 익으실 거예요! 👍

인프런 AI 인턴

안녕하세요, 인프런 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

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

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