react custom hook

 

import { withAuth } from "../../../src/components/commons/hocs/withAuth";
import MyPageContainer from "../../../src/components/units/user/mypage/UserMypage.container";

export function MyPage() {
  return <MyPageContainer />;
}

export default withAuth(MyPage);

Mypage 부분,

HOC (MyPage를 withAuth의 인자로 주고 그 return을 export함)

 

이걸 커스텀훅을 사용하는 방식으로 바꿀건데, page가 아니라 container에서 작업하기로 했다. 

 

 

import { useAuth } from "../../../commons/hooks/useAuth";

export default function MyPageContainer() {

  useAuth();

  return (
    <div>마이 페이지
    </div>
  );
}

useAuth를 import하고 그냥 useAuth(); 함수 호출 하면 끝! 간단하다~~~ 

 

 

밑은 useAuth.tsx

// useAuth.tsx
import { useRouter } from "next/router";
import { useEffect } from "react";
import { useRecoilState } from "recoil";
import { accessTokenState } from "../../../commons/store";

export function useAuth() {
  const router = useRouter();
  const [accessToken, setAccessToken] = useRecoilState(accessTokenState);

  console.log(accessToken);
  useEffect(() => {
    if (!accessToken) {
      alert("로그인 후~하고 ");
      router.push("/user/login"); // 여기 visited page로...
    }
    // if (!localStorage.getItem("accessToken")) {
    //   // 있는지 없는지 찾아갖고 옴
    //   alert("로그인 후 이용 가능합니다!");
    //   router.push("/user/login");
    // }
  }, []);
}

주석 부분은 localStorage에서 찾아오던 방식

 

++ 0616 추가) 내가 로그인 계속 끊기던 이유가 state에서만 저장해서였다. localstorage는 페이지 껐다 켜도 남아있기 때문에 accesstoken을 갖고 있고!!! 그래야 로그인을 유지한다.