custom hook 사용하기

앞서 만든 api/users/me 경로를 통해 사용중인 유저의 profile을 확인 할 수 있었으며 각 page마다 이 데이터를 보여주고 싶다 사용하는 빈도가 매우 높으며 이것을 coutom hook으로 만들어 재사용 빈도를 높이고 효율을 극대화 하고 싶다.

useUser

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") 
    //앞서 만든 profile 데이터 경로
      .then((response) => response.json())
      .then((data) => {
        if (!data.ok) {
          return router.replace("/Login");
        }
      //데이터가 없을 경우 Login 페이지로 가게 된다.
      //!data.ok === false 가 성립 되는 이유는 
      //res: NextApiResponse<ResponseType> 타입을 
      
      //export interface ResponseType {
  	  //ok: boolean;
  	  //[key: string]: any
	  //}
	  //으로 지정 해줬기 때문에 가능하다. session을 통해 받은 유저 정보가 없을 경우 ok:false 한 상태이다.      
        setUser(data.profile);
      //데이터가 있다면 데이터를 useState로 상태변경이 되도록 해줬다.
      });
  }, [router]);
  return user;
}

사용해보기

정말 간단하다.

import { useRouter } from "next/router";
const Home: NextPage = () => {
  const user = useUser()
  console.log(user);
}

우리가 자주 사용하는 useState 처럼 사용하면 된다.