react hook 중복사용 에러

[Eomhyunjun]

제가 구현하려는 기능 상
useMemo 안에서 useData라는 custom hook을 사용할 수 밖에 없는데요.
이 경우에 자꾸 아래와 같은 에러가 뜨는데...

훅안에 훅을 써서 그런 것 같은데, 도저히 해결 방법이 생각나질 않습니다.
이 경우 어떻게 해야할 지 도와주실 수 있나요?

[kooljay82]

공유해주신 에러 메시지에는 유효하지 않은 훅(hook) 호츨이라고 안내하고 있습니다. 리액트 Hooks는 컴포넌트 함수 안에서만 호출될 수 있는데, 이와 관련한 리액트 공식 문서 링크 남겨 놓습니다. 확인 부탁드립니다.

https://ko.reactjs.org/docs/hooks-rules.html#only-call-hooks-from-react-functions

[Eomhyunjun]

감사합니다!

[minhoryang]

hook안에서 rendering code가 담겨있어서 더 그런것 같습니다.
rendering code는 메인 컴포넌트 함수의 return에 다 몰아주시고, 그곳까지 로직을 끌고오셔야합니다.
로직을 계산하는건 useMemo/useState 안에서 진행하시구요.

[minhoryang]

location_res가 바뀔때마다, location_content() 안의 rendering code가 바뀌길 원해서 useMemo를 사용하신 것 같은데,
제가보기엔 그냥 useMemo없이 컴포넌트의 return안에서 그냥 두셔도 자동 반영될 것 같습니다.

[minhoryang]

const location_res = {
  num: "0",
  name: "",
};
const print_msg = (e) => {};

export function Test({}): React.ReactElement {
  return (
    <div>
      { location_res && 
        <tr key={location_res.num}>
          {location_res.num !== "0" ? (
            <td>
              <button onClick={print_msg}>
                {location_res.name}
              </button>
            </td>
          ) : (
            <td>{location_res.name}</td>
          )}
        </tr>
      }
    </div>
  );
}

[Eomhyunjun]

제가 js부터 react까지 이번에 다 처음하다보니 깊이 있게 공부하지 못해서 저런 코드가 나온 것 같습니다. ㅠㅠ 멘토님이 말씀하신것과 비슷한 방법으로 해결했습니다! 답변 정말 감사합니다!