[React] Updating arrays in state

상태 안에서의 array는 read-only

자바스크립트에서 array는 mutable하지만, 만약 state안에서 aray를 쌓고 있다면 immutable한 것처럼 다뤄야 한다.

• arr[0] = 'bird'
• push()와 pop()
  등을 이용해서 array를 직접적으로 조작하면 안된다는 얘기!

state 내의 array를 업데이트할 때에는, 새로운 것(혹은 기존 것의 복제)을 만든 후, set function을 통해 그것으로 교체해줘야 한다.

• filter()
• map()
  등의 non-mutating 메소드를 이용해서 새로운 배열을 만들 수 있다.

📌 여기서 잠깐! non-mutating?

기존 배열을 수정하지 않고 새로운 배열을 만들어내는 것을 말함. flter과 map은 그런 애들이다.

const myNextList = [...myList];
const artwork = myNextList.find(a => a.id === artworkId);
artwork.seen = nextSeen; // Problem: mutates an existing item
setMyList(myNextList);

이런 식의 직접적 수정이 아닌,

setMyList(myList.map(artwork => {
  if (artwork.id === artworkId) {
    // Create a *new* object with changes
    return { ...artwork, seen: nextSeen };
  } else {
    // No changes
    return artwork;
  }
}));

map()을 이용한 달라진 별개의 배열로 상태를 업데이트 해줘야 한다.

useImmer hook을 사용하면 mutate 가능해짐

나중에 필요해지면 와서 보기.