[React] 🚨 Error: Maximum update depth exceeded. 🚨 useEffect Error 🚨

🚨 Error Log

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

🧨 Error Found

문제는 useEffect 를 사용하는 과정에서 발견되었다
문제점을 발견해보자

  useEffect (() => {
  	// 힌트 : useEffect 의 loop 성질 파악하기
    /* 내용 */
  })

자, 문제는 바로

📐 Error Solute

useEffect 의 호출 시점이다
useEffect 은 별도의 호출 시점을 선언해주지 않는다면 무한 루프를 돌게 된다

React-useEffect 는 인터벌 혹은 외부와의 상호 작용의 필요로 제공하는 상태관리 Function 이므로 호출하는 순간이 중요하다

Solute Code

  useEffect (() => {
    /* 내용 */
  }, [])

/* [] 가 비면 컴포넌트 렌더링 시에만 호출
     ||(or) 의존성 배열을 넣어, 호출 시점을 구체화 시키는 것이 가능 */

이외의 참조는 구글링으로~

🕵️‍ Error is Best Teacher
리액트를 시작한지 어느덧, 6개월? 이지만
아직 모든 개념에 100% 도달하지 못한 상태라고 생각한다

(객관적으로 아직 50% 만 이해한 것 같다 😅)