react 강의 map파트에서 ..

따봉 바꾸는 코드를 짤때

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 이렇게 바뀌는

원리는 이해를 했지만 정작 결과가 이상하게 되네요 ㅠㅠ