React | 객체 타입 State 업데이트

---

전개 연산자(`...`) 사용

• 이전 객체의 속성을 그대로 가져오면서 새로운 데이터를 추가하거나 덮어쓰는 방식으로 객체를 복사한다. (불변성 유지)

const [myObject, setMyObject] = useState({ name: 'John', age: 25 });

const updateObject = (newData) => {
  setMyObject((prevObject) => ({
    ...prevObject,
    ...newData,
  }));
};

console.log(updateObject({ age: 26 })); // { name: 'John', age: 26 }

---

Object.assign()

Object.assign(target, source1, source2, ...);

• 원본 객체에서 속성을 다른 객체로 복사하는 메서드 이다.
• target은 목표 객체로 여기에 속성이 복사된다.
• source1, source2 는 복사될 소스 객체들이다.
• 만약에 속성이 이미 존재한다면, 그 속성은 소스 객체의 값으로 덮어쓰게 된다.
• 새로운 객체를 반환한다.

Object.assign() 사용

• Object.assign()를 사용해 빈 객체에 속성을 복사하여 새로운 객체를 만들어 변경을 수행할 수 있다.
• 이때 복사된 새로운 객체를 조작하므로 원본의 불변성은 유지되었다.

const [myObject, setMyObject] = useState({ name: 'John', age: 25 });

const updateObject = (newData) => {
  setMyObject((prevObject) => Object.assign({}, prevObject, newData));
};

console.log(updateObject({ age: 26 })); // { name: 'John', age: 26 }