이전의 State 업데이트 시키기

state에 현재 어떤 값이 담겨 있는지 모르기 때문에 정확하게 이전 state에서 업데이트 시킬 데이터를 setState 해주기 위해서는 prevstate를 사용한다.

const [cards, setCards] = useState({카드내용});

const createOrUpdateCard = (card) => {
  const updated = {...cards}
  updated[card.id] = card;
  setCards(updated)
};

• createOrUpdateCard 함수는 변경되는 카드를 업데이트 시키는 함수이다.

• 우선 원래 있던 카드의 정보에 spread 연산자로 updated 변수에 복사한다.

즉, 이전의 값을 우선 복사한 후 card의 객체에 접근하여 새로운 정보로 수정한다.

• 그리고 업데이트 된 내용을 setCards로 업데이트 한다.

문제점

위 코드의 문제점은 const updated = {...cards}에서
이전 상태를 배경으로 해서 값을 업데이트할 때는 업데이트 하는 시점에 존재하는 state가 오래된 데이터일 수도 있다. 동기적으로 할 수 없다.

따라서 이전의 값을 가져오고 그 값을 업데이트 시킨다.

해결

  const createOrUpdateCard = (card) => {
    setCards((cards) => {
      const updated = { ...cards };
      updated[card.id] = card;
      return updated;
    });
  };

• setCards로 이전의 cards 값을 가져오고 그 cards 값을 새로운 card라는 정보로 업데이트 시키는 함수