리액트에서 useState를 활용한 상태 업데이트 문제 해결

문제 상황

코드 중 아래 부분에서 따봉(좋아요) 숫자를 업데이트하는 과정에서 오류가 발생했다.

<span onClick={() => {
  let copyR = [...따봉후];
  copyR[i] = copyR[i] + 1;
  따봉변경후(copyR);

  따봉변경후(따봉후 + 1);
}}> 👍 </span> {따봉후[i]}

문제 원인

1. 두 번째 따봉변경후(따봉후 + 1) 호출이 첫 번째 호출 뒤에 오면서, 첫 번째 호출이 덮어씌워지는 문제가 있었다.
2. 따봉후가 아래와 같이 useState를 활용한 배열 형태이기 때문에 따봉후 + 1은 배열 형태가 아니기에 적절한 방식이 아니었습니다.

 let [따봉후, 따봉변경후] = useState([0, 0, 0]);

해결 과정

두 번째 호출을 삭제하여 덮어씌우는 문제를 해결했다.

<span onClick={() => {
  let copyR = [...따봉후];
  copyR[i] = copyR[i] + 1;
  따봉변경후(copyR);
}}> 👍 </span> {따봉후[i]}

따봉후 + 1을 따봉후[i] + 1로 수정하여 된 copyR 배열에서 해당 인덱스의 값에 1을 더하는 방식으로 변경하여 해결한 것이다.

jsxCopy code
<span onClick={() => {
  let copyR = [...따봉후];
  copyR[i] = copyR[i] + 1;
  따봉변경후(copyR);
}}> 👍 </span> {따봉후[i]}

최종 코드

{
  글제목.map(function (a, i) {
    return (
      <div className="list" key={i}>
        <h4 onClick={() => {
          setModal(true); setTitle(i);
        }}> {글제목[i]}
          <span onClick={() => {
            let copyR = [...따봉후];
            copyR[i] = copyR[i] + 1;
            따봉변경후(copyR);
          }}> 👍 </span> {따봉후[i]}
        </h4>
        <p> 발행</p>
      </div>
    );
  })
}

결론

상태 업데이트에서 발생한 오류를 파악하고 수정하며 문제 해결을 하는 과정을 통해 적절한 따봉(좋아요) 기능을 구현할 수 있었다. 스프레드 연산자를 사용하여 배열의 복사본을 활용하는 방법에 대해 이해할 수 있었다. 특히 리액트에서는 상태 관리가 중요하므로, useState를 적절히 활용하여 상태를 업데이트하는 방법에 많은 주의가 필요함을 느낄 수 있는 시간이었다.