setState로 배열의 값 바꾸기

const [myIndex, setMyIndex] = useState([
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
]);

위 배열의 값을 바꾸고 화면에 다시 그려줘야 한다면 setState를 활용해야 한다.

❌ 배열의 주소를 공유

const onClickEdit = (event: any) => { 
    const aaa = myIndex; // 이렇게 하면 배열의 주소를 공유하게 된다.
    aaa[event.target.id] = true; 
    // 객체의 주소를 공유하기 때문에 원본의 내용도 함께 바뀐다.
    setMyIndex(aaa); 
    // setState는 기존값과 변경된 값을 비교해서 값이 다를 때만 작동하는데, 
    // 위에서 값을 이미 바꿨기 때문에 여기서는 작동하지 않는다.
  };

👍🏻 스프레드 연산자를 활용해서 새 배열 생성

const onClickEdit = (event: any) => { 
    const aaa = myIndex;
    aaa[event.target.id] = true; 
    setMyIndex([...aaa]); // 새로운 배열(새로운 주소)가 만들어진다.
  };