[ Error ] Too many re-renders. 에러해결

노도·2022년 4월 1일
0
post-thumbnail
< 오늘은 너구나,, 덤벼라 >


프로젝트 진행도중 settimeout 적용시켰는데 갑자기 Too many re-renders 에러가 나타났다.

오늘은 또 얼마나 성장할지 기대된다 ..ㅋ

어떤 에러인가?

리액트 무한루프 렌더링
props로 전달받은 변수를 setState에 넣을때 무한루프가 걸렸다.

에러 핸들링 방법

useEffect를 사용하여 렌더링순서를 제어한다.
useEffect를 이용하여 sideEffect로부터 보호한다.

에러 사유

에러 사유에 대해 작성하기 전,
리액트의 렌더링 조건을 먼저 보자

리액트의 렌더링 조건

  1. state 변경이 있을 때
  2. 부모 컴포넌트가 렌더링 될 때
  3. 새로운 props 가 들어올 때
  4. shouldComponentUPdate 에서 true 가 반환 될 때
  5. forceUpdate 가 실행 될 때

React의 useState렌더링은 비동기로 이루어진다.
때문에 개발자의 예측대로 렌더링이 되지 않고 꼬여버린다.

const [text,setText] = useState('bye')
..생략..
setText('hi') //5초걸린다 가정
console.log(text)//2초걸린다 가정


이런상황에서는 5초동안 setText('hi')를 기다리지 않고 
그냥 console.log(text)를 해버리기 때문에 초기값 'bye'가 출력된다.

다들 한번씩은 useState값이 밀려서 렌더링되는 경우를 확인했을텐데 이 때문이다.


useEffect(()=>{
	console.log(text)
},[text])

위 함수는 text값이 바뀔때마다 console.log(text)를 한다는 뜻이다.
즉 두번째 인자 배열안의 값들이 바뀔때마다 useEffect의 첫번째 인자인 콜백을 무조건 실행한다.

useState를 동기화 할 수 있게 된다.

마지막으로,,

< 오늘도 개똥이는 성정한다 ! >
profile
유연한 사고로 빠르게 습득하기.

0개의 댓글