객체 배열 값 변경하기 그런데 이제 immutable을 곁들인

간소화 코드

const [emoji, setEmoji] = useState([
    { combine: "😆 재밌어요", state: false },
    { combine: "🤓 유익해요", state: false },
    { combine: "😭 슬퍼요", state: false },
])  

위와 같은 객체 배열의 state 값을 변경해보자.

emoji[0].state=true;

처럼 바꾸면 너무 좋겠지만 다들 알다시피 state 의 원본을 바로 바꿀 수는 없다. 그렇기 때문에

1. 스프레드 연산자를 사용해서 복사한 후 복사본을 바꾸고,
2. 그 복사본을 setState 을 통해 변경시켜주면 된다.

예시코드

//복사본
let newEmoji = [...emoji];

const handleClickEmoji = (e) => {
  newEmoji[e.target.name].state = true;
  setEmoji(newEmoji);
};

위와 같이 변경해주면 됩니다~!