인프런 커뮤니티 질문&답변

ex1) useMyMoveToPage1.tsx

import { useRouter } from "next/router";

export const useMyMoveToPage1 = (path: string) => () => {
  const router = useRouter();  // error

  void router.push(path);
};

ex2) useMyMoveToPage2.tsx, 강의내용

import { useRouter } from "next/router";

interface IUseMyMoveToPage2Return {
  onClickMoveToPage: (path: string) => () => void
}

export const useMyMoveToPage2 = (): IUseMyMoveToPage2Return => {
  const router = useRouter();

  const onClickMoveToPage = (path: string) => () => {
    void router.push(path);
  };

  return { onClickMoveToPage };
};

ex3) /test/index.tsx

import { useMyMoveToPage1 } from "../../src/components/commons/hooks/useMyMoveToPage1";
import { useMyMoveToPage2 } from "../../src/components/commons/hooks/useMyMoveToPage2";

export default function TestPage() {
  const { onClickMoveToPage } = useMyMoveToPage2();

  return (
    <>
      <button onClick={useMyMoveToPage1("/test/01")}>
        useMyMoveToPage: Move To Test01 Page
      </button>
      <button onClick={onClickMoveToPage("/test/01")}>
        useMyMoveToPage2: Move To Test01 Page
      </button>
    </>
  );
}

[useMyMoveToPage1 error 내용]

useMoveToPage 만들기를 실습하다가 더 짧게 리팩토링할 수 있을 것 같다는 생각에 맨위에 ex1 처럼 해봤는데 const router = useRouter() 부분에 문제가 있다고 하더라구요. 에러 내용을 번역해서 봐도 "잘못된 hook 호출이고 함수 컴포넌트 내부에서만 호출될 수 있다"라고 하는데 무슨 말인지도 사실 잘 모르겠습니다.. 강의내용처럼 useRouter를 밖에 두고 onClickMoveToPage라는 hof 함수를 따로 만들어 return 해줘야 문제가 없다는 것은 알겠지만 음... 이해가 되지 않아서 더 자세한 원리와 error가 나는 이유에 대해서 알려주시면 감사드리겠습니다. 잘 알려주시는 것에 비해 제 부족한 학습능력이 살짝 부끄럽네요 ㅠㅠ