231105 / Day 33

  const handleAddButtonClick = () => {
    const newCard = {
      id: cards.length + 1,
      title,
      content,
    };
    setCards([...cards, newCard]);
    console.log(cards);

아래와 같이 코드 작성 후 콘솔 확인 시 업데이트 내용이 나타나지 않음.

이유: 

React의 setState 함수는 비동기적으로 동작하기 때문에 상태 업데이트가 즉시 반영되지 않을 수 있다. 따라서 상태 업데이트가 아직 완료되지 않은 상태에서 console.log가 실행되어 이전 상태를 보게 된다.

 

해결:

코드를 아래와 같이 수정후 업데이트된 배열이 출력되었다.

  const handleAddButtonClick = () => {
    const newCard = {
      id: cards.length + 1,
      title,
      content,
    };
    const cardUpdate = [...cards, newCard];
    setCards(cardUpdate);
    console.log(cardUpdate);
  };

 

console.log()를 실행하기 전에 cardUpdate변수에 최신 상태를 반영한 배열을 넣어주고 setCards()에 해당 변수를 사용하면 업데이트 된 결과가 출력 된다.

 

카드의 status관리.

삼항연산자를 사용하여 status에 맞는 섹션으로 이동하기.

 

 

피곤..