"다시 렌더링이 너무 많습니다. React는 렌더링 수를 제한합니다"라는 메시지가 나타나는 이유는 무엇입니까? 내 무한 루프는 어디 있지?

Question

아래 코드가 실행되지만 "재렌더링 횟수가 너무 많습니다" 오류가 발생합니다. 이유는 모르겠습니다. 듀얼 스위치를 꺼내서 가격과 같은 단위를 기준으로 하면 작동합니다. 그러나 내 코드에서 무한 루프가 발생하는 위치를 찾을 수 없습니다. 인터넷에서는 내가 useState를 잘못 사용하고 있을 수도 있다고 합니다. 도움을 주시면 감사하겠습니다. 저는 초보자이므로 어리석은 짓을 했을 수도 있다는 점을 이해해 주세요! 어쨌든 학습은 훌륭합니다! 감사해요.

으아악

클릭한 열을 기준으로 각 열을 정렬 가능하게 만들려고 합니다. 보너스 질문입니다. 렌더링 시 헤더가 아래 열과 일치하지 않는 이유는 무엇입니까?

Answer 1

함수를 직접 호출하는 대신 함수 참조를 전달해야 합니다. 이렇게 하면 함수는 구성 요소가 렌더링될 때 즉시 호출되지 않고 이벤트가 발생할 때만 호출됩니다.

으아악

또한 sortArray 함수를 읽을 수 있도록 리팩터링했습니다. 그것이 잘못된 경우. 방해하지 마세요. :D

으아악

useCallback을 사용하여 종속성이 변경되지 않은 경우 불필요한 다시 렌더링을 방지하세요

으아악

이 정보가 도움이 되기를 바랍니다.