Too many re-renders 에러

알고리즘 수정 페이지 만들다가 "Too many re-renders" 에러가 났다. 문제 배열을 redux에 가져온 뒤에 url에 파라미터로 넘어온 id값을 기준으로 배열에서 filter 메서드를 통해 해당 문제를 걸러내는 방식을 사용했다.
그러고나서 state의 초기화를 진행했는데 바로 re-render 에러가 났다.

if (!isNaN(parseInt(param.id!))) { // 알고리즘 문제 선택했을 경우
    const prob = probs.filter((x) => x.id === parseInt(param.id!))[0];

    setName(prob.title);
}

뭐하는 에러인지

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

에러 설명으로는 무한 루프 방지를 위해 렌더링 개수를 제한해서 그렇다고 하는데 겨우 state하나 초기화 했다고 그런 에러나 가는게 이해가 안 갔다.

https://anerim.tistory.com/161

여기 글을 참고했는데 렌더링 하는 과정에서 setState 렌더링 시키고 또 렌더링 되면 setState가 나오고 그래서 무한루프가 떠서 그런거 같다. 페이지가 처음 떴을 때만 렌더링되게 useEffect를 사용해봐야겠다.

  useEffect(() => {
    const prob = probs.filter((x) => x.id === parseInt(param.id!))[0];
    setName(prob.title);
    setLevel(prob.level);
  }, [])

useEffect를 사용하고 두 번째 파라미터에 그냥 대괄호만 넣어줌으로써 최초에 페이지가 마운트 될 때만 작동하게 제한돼서 에러가 해결이 됐다. 강의 들을 때 계속 사용하길래 굳이? 싶었는데 언제 사용해야하는지 느낌이 온 것 같다.