에러 메세지에서 알 수 있듯이 이전 렌더링에서 호출된 hooks 보다 현재 렌더링에서 hooks가 더 많이 호출된 결과로 에러가 발생한다.
hooks는 매 렌더링마다 동일한 호출을 보장받아야 한다.
그렇기에 hooks를 조건 문안에서 쓰는 게 금지되어 있고 컴포넌트 최상위에서 사용하라고 권장되는 이유이다.
hooks라는 게 함수의 상태를 기억해야 하는 것이기 때문에 호출 순서를 이용하여 함수의 상태를 기억했다가 이전의 상태를 가져올 수 있는 것이다.
https://ko.reactjs.org/docs/hooks-rules.html#explanation