안녕하세요. Hooks 규칙 위반 이라고 나오는데 잘모르겠습니다. ㅜㅜ

React
,
1

안녕하세요.
이제 막 리액트를 시작했습니다.

기존에 가지고 있던걸 리액트로 바꾸려고 하니 너무 어렵네요…

function mapContent({lat, lng, zoom}) {
    map = new naver.maps.Map("map", {
        useStyleMap: true,
       ...
    });  
    naver.maps.Event.addListener(map, "dragend", mapBounding);
    mapBounding();
}
const mapBounding = () => {
  const { isLoading, error, data } =
  useQuery(["axios", {top: ..., right: ..., bottom: ..., left: ...}],
  () => axios("url"));
}

네이버 지도를 생성하고 그 바운드리에있는 내용들을 가져오는건데 최초에는 잘 되고
드래그를 할때 다시 데이터를 가져오게 같은걸 호출했습니다.
그런데 그부분에서 hook 규칙오류가 나오고 있습니다.
이부분을 어떻게 해야할지 모르겠습니다.

어찌해야 할까요? ㅜㅜ

2

hook 사용방법에 문제가 있는것 같습니다.

위 문서 중 hook 사용 규칙에 보면,

hook 은 일반 함수이지만 react component 안에서만 호출해야 하고 일반 자바스크립트 함수에서는 hook 을 사용할 수 없습니다.

위 코드에서는 useQuery 는 react hook 인것 같은데 컴포넌트가 아니라 event handler 함수에서 hook 을 호출한 것이 문제인것 같습니다.

따라서 mapBounding 에서 useQuery 를 사용하지 마시고 fetch 나 axios 로 데이터를 가져오면 될 것 같습니다.

hook 규칙은 아래 문서를 참고하세요

3

답변 감사합니다.
제가 본 api예제들은 useState, useEffect 이 다 있어서 hook은 다 들어가는줄 알았습니다.
몇일을 어찌해야하나 고민했는데 감사합니다.