Next.Js useRouter push or replace

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

export default function useUser() {
  const [user, setUser] = useState();
  const router = useRouter();
  useEffect(() => {
    fetch(`/api/users/me`).then((response) =>
      response.json().then((data) => {
        if (!data.ok) {
          return router.replace("/enter");
        }
        setUser(data.profile);
      })
    );
  }, [router]);

  return user;
}

 

먼저 useEffect()를 통해서 user의 정보를 가져와서 관리하는 hook을 생성 중에 유용한 사실을 알게 되어 기록하게 되었습니다.

 

useRouter()의 push method의 경우 브라우저에 history를 남깁니다.

반면에 replace method는 history를 남기지 않습니다.

 

만약 Home으로 접근했을 때나 로그인이 필요한 페이지에 접근하였을 때 redirect 하는 로직을 짜게 된 다면 앞으로 유용하게 쓰일 것 같습니다.