custom-hook + SWR

앞에서 기록한 useUser() hook에 SWR 도입하였다.

import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import useSWR from "swr"; //추가 

const fetcher = (url: string) => 
fetch(url).then((response) => response.json()); //추가 

export default function useUser() {
  //const [user, setUser] = useState();
   const { data, error } = useSWR("/api/users/me", fetcher); //추가   
  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;
}

useSWR()을 사용할 때는 2개의 인자가 필요하다. 첫번째는 요청을 보낼 url이고 두번째 인자는 fetcher 함수이다. fetcher 함수는 첫번째 인자인 key에 입력한 url을 받는다. url이 아닌 key라고 부르는 이유는 이 url이 api를 요청할 url이기도 하면서 캐시를 저장할 때 사용할 key이기도 하기 때문이다. 다시 요점을 말하면 fetcher 함수는 첫번째 인자에 입력한 url로 요청을 보내는 함수이다. useEffect가 필요없는 이유는 useSWR()은 useEffect처럼 함수가 처음 실행될 때 렌더링을 해주기 때문이다. 이제 profile 데이터를 캐싱 할 수 있게 됐다.