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]); // 새로운 배열(새로운 주소)가 만들어진다.
};