✒️ 2025-05-28 10:34 내용 수정

Too many re-renders. React limits the number of renders to prevent an infinite loop.

• 참고 자료 : TOOKTAK's 리액트 에러 Too many re-renders. React limits the number of renders to prevent an infinite loop
• 에러가 난 상황 : React에서 Onclick function에 parameter를 전달하던 중 발생했다.
• 에러 사진
  
• 에러 코드

  let [title, titleChange] = useState(['존 윅4', '가디언즈 오브 갤럭시3', '스파이더맨:어크로스 더 스파이더버스']); // 동적 내용, html 재랜더링
  let [date, dateChange] = useState(['2023-04-12', '2023-05-03', '2023-06-21'])
  let [likeHit, likeHitChange] = useState([0, 0, 0]);
  let [detail, setDetail] = useState([false, false, false]);

// onClick으로 호출할 함수를 따로 빼서 작성했다.
  function likeUp(e) {
    let copy = [...likeHit];
    copy[e]++;
    likeHitChange(copy); 
  }

  function detailSwap(e) {
    let copy = [...detail];
    copy[e] = !copy[e];
    setDetail(copy);
  }

// 중략

{
  title.map((el, i) => {
	return(
	  <div>
		<div key={i} className="item">
		  <h3> 
			<span onClick={detailSwap(i)}>{el}</span> // 이 부분에서 문제 발생
			<span onClick={likeUp(i)}>👍</span> {likeHit[i]} // 이 부분이 문제 발생
		  </h3>
		  <p>{post}</p>
		</div>
		<div className='row'>
		{
		  // useState detail의 상태에 따라 보이거나 안보이게 설정
		  (detail[i]) ? <Detail title={title} date={date} i={i}></Detail>: null
		}
	  </div>
	</div>
	);
  })
}

• 참고 자료 링크에서 확인한 내용으론 해당 함수를 화살표 함수로 바꿔주면 해결된다고 한다.
• 에러 발생 원인은 렌더 과정에서 state를 변화하는 함수가 있을 때 반복해서 re-rendering하기에 setState를 콜백으로 다시 렌더링을 트리거하면서 무한 루프에 빠진다고 한다.
• 내 코드에서 오류가 생긴 부분 역시 useState에서 설정한 값을 변경하는 부분에 map((el, i) => return (function(i)))와 같이 작성했기 때문에 무한 루프에 빠진 것이다.

{
  title.map((el, i) => {
	return(
	  <div>
		<div key={i} className="item">
		  <h3> 
			<span onClick={() => detailSwap(i)}>{el}</span> // 화살표 함수로 표현을 수정
			<span onClick={() => likeUp(i)}>👍</span> {likeHit[i]} // 화살표 함수로 표현을 수정
		  </h3>
		  <p>{post}</p>
		</div>
		<div className='row'>
		{
		  // useState detail의 상태에 따라 보이거나 안보이게 설정
		  (detail[i]) ? <Detail title={title} date={date} i={i}></Detail>: null
		}
	  </div>
	</div>
	);
  })
}