클론코딩 페이지 만드는 도중 갑자기 화면에 아무것도 안나오는 에러가 발생
리렌더링이 너무 많습니다. React는 무한 루프를 방지하기 위해 렌더 수를 제한합니다
라는 오류;
<span onclick={setLike((i) => !i)}>{like ? "🤜" : "👍"}</span>이 코드를 쓰냐 안쓰냐에 따라 저 오류가 떴다 안떴다 한다.
그래서 저 코드를
<span onclick={() => setLike((i) => !i)}>{like ? "🤜" : "👍"}</span>
로 변경하니 잘 뜬다.
이 에러가 발생하는 원인은 렌더 과정에서 state를 변화하는 함수가 있다면 리렌더링이 계속 일어나면서 발생하는 에러라고 한다.
onClick의 중괄호에 () =>가 없어서 클릭하면 작동하는 것이 아니라, 클릭하지 않아도 setLike 함수가 계속해서 작동하는 것이었다!
근데 뜨는 건 잘 뜨는데 왜 클릭해도 상태변화가 안되니 했더니
onclick ❌ => onClick ⭕️이제 저런 실수는 두 번 다시 안 할 것 같다.
문제아