[Today's Bug] Too many re-renders. React limits the number of renders to prevent an infinite loop

📢 이 버그 좀 보세요!

🐞 버그가 나타난 이유?

구글링을 해보니 해당 버그가 발생하는 이유는 render가 되는 과정에서 state를 변화하는 function이 있다면 re-render가 반복적으로 일어나 Too many re-render 버그가 뜨는 것으로 확인됐다. handleClickOpen 함수안에서 state 상태값을 변경하는 함수가 있다. 즉, props를 통해 전달받은 변수를 setState에 넣을때 무한루프가 걸린다고 보면 된다.

...
  const handleClickOpen = (value) => {
    setOpen(true);
    setSelectedValue(value);
  };
...
<Card key={c.id} onClick={handleClickOpen(c.grt_title)}> // onClick 이벤트내의 handleClickOpen함수가 바로 리랜더링을 유도하는 함수였다.
	<CardActionArea>
		<CardContent className="card_content" sx={{backgroundImage: `url('/assets/img/${c.grt_img}.jpg')`}}>
          <Typography gutterBottom variant="h5" component="div">
              {c.grt_title}
          </Typography>
          <Typography variant="body2" color="text.secondary">
              {c.grt_contents}
          </Typography>
          <Typography variant="caption" color="text.secondary">
              {c.grt_date !== null ? common.timestamp(c.grt_date.toDate()) : null}
          </Typography>
		</CardContent>
	</CardActionArea>
</Card>
...

🕸 어떻게 이 버그를 잡을까?

결론적으로 render가 되는 과정에서 state를 변화하는 function이 있다면 re-render가 반복적으로 일어나 Too many re-render 버그가 나타나는 것으로, props로 전달해 주는 함수를 useCallback()으로 감싸주어서 함수를 리턴해 성능 최적화를 시켜줌으로써 re-render를 막아준다.

수정 전 : <Card key={c.id} onClick={handleClickOpen(c.grt_title)}>
수정 후 : <Card key={c.id} onClick={()=>{handleClickOpen(c.grt_title)}}>