따봉 바꾸는 코드를 짤때
let [글제목, 글제목변경] = useState([
"남자 코트 추천",
"강남 우동 맛집",
"파이썬 독학", ]);
let [따봉, 따봉변경] = useState([0, 0, 0])
=============================
{글제목.map((a, i) => {
return (
<div className="list" key={i}>
<h4>
{글제목[i]}
<span
onClick={() => {
let copy = [...따봉];
copy[i] = copy[i] + 1;
따봉변경(copy);
}}
>
👍
</span>{" "}
{따봉[i]}
</h4>
<p>2월 18일 발행</p>
</div>
);
})}
이렇게 코드를 사용하면 각각의 글 제목옆에 span을 클릭시 1->2->3 이렇게 증가하는게아닌
011111111111111 이런식으로 기존의 html 옆에 새로운 글자가 생기며 1이 무한복제가 됩니다...
이유가 뭘까요 ? copy에 ...연산자로 새로운 배열을 만들고 만들어진 배열에 i인덱스 값을 활용하여
각각 배열의 순서를 정의하고 정의한 배열값마다 +1 후 따봉변경(copy)를 적용하여 0->1->2 이렇게 바뀌는
원리는 이해를 했지만 정작 결과가 이상하게 되네요 ㅠㅠ
