6주차 1일 커스텀 훅

커스텀훅 => use 로 시작하는 함수 (useState, useEffect 등) 를 직접 만들어 쓰는 것

import { useRouter } from "next/router";
import { useEffect } from "react";

export function useAuth() {
  const router = useRouter();
  useEffect(() => {
    if (!localStorage.getItem("accessToken")) {
      alert("로그인후 이용가능합니다");
      router.push("/23-04-login-check");
    }
  }, []);
}
> accessToken이 있는지 없는지 검사.

그냥 함수랑 똑같긴한데 나누는기준은 use가 들어가는가 안들어가는가, (DOCS에서도 use를 반드시 앞에 붙히라고는 되있다.)

코드의 작동 상에는 별 차이가 없지만 앞에 use를 쓰는게 관례이다. 서비스의 규모가 커졌을 때 function과 hook을 구분하기위해 붙힌다고한다(디버깅목적)

useForm이라는 훅에 onChangeWriter, onChangeTitle... 이런 함수들이 포함되어 있다고생각하면 된다.

여러 컨테이너에서 쓰이는 로직들을 커스텀훅으로 뺴서 사용할 수 있다.

import { useRouter } from "next/router";
export function useMoveTopage() {
  const router = useRouter();

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

  return { onClickMoveToPage };
}

=> router.push 를 아래 처럼 커스텀 훅으로 따로만들어서 import 함

import { useMoveTopage } from "../../src/components/commons/hooks/useMoveToPage";

export default function CustomHooksUseMoveToPage() {
  const aaa = useMoveTopage();

  return (
    <div>
      <button onClick={aaa("/board")}>게시판</button>
      <button onClick={aaa("/market")}>마켓으로</button>
      <button onClick={aaa("/mypages")}>myPage</button>
    </div>
  );
}