[React] Updating Objects in State

state는 객체를 포함은 모든 종류의 javascript 값을 보유할 수 있다.
그러나 react state에서 보유하고 있는 객체를 직접 변경해서는 안된다.
객체를 업데이트 하려면 새 객체를 생성(또는 기존 객체의 복사본을 생성)한 해당 복사본을 사용하도록 해야한다.

React state object를 올바르게 업데이트 하는 방법을 알아보자.

object state와 기본 자료형 state의 다른 점

const [x, setX] = useState(0);

x는 number일 것이고, 이거는 x=5 이런식으로 변경할 수 없다.
setX(5) 이런 식으로 렌더링을 트리거하여 변경 가능

const [position, setPosition] = useState({ x: 0, y: 0 });
position.x = 5;

근데 object state는 이게 된다..
하지만 객체 state도 안의 값을 변경할 수 없는 취급을 해줘야한다.
따라서 state 안의 값을 모두 읽기 전용으로 해줘야한다.

	onPointerMove={e => {
        setPosition({
          x: e.clientX,
          y: e.clientY
        });
      }}

{x: e.clientX, y: e.clientY}

이런 식으로 새로운 객체를 만들어서 바꾸어줘야 한다는 말임.

position.x = e.clientX
이런 식으로 바꾸면, 과거 렌더링에서 상태를 바꾸는 것이기 때문에 상태가 화면에 반영되지 않는다.

setPerson({
  firstName: e.target.value, // New first name from the input
  lastName: person.lastName,
  email: person.email
});

이렇게 생긴 객체를 변경하고 싶다면

setPerson({
  ...person, // Copy the old fields
  firstName: e.target.value // But override this one
});

이렇게 해주어야한다.
...person은 예전 객체(person) 필드의 내용을 복사하는 부분

Immer로 객체 업데이트

https://react.dev/learn/updating-objects-in-state
여기 마지막 부분을 참고하자