useUser, useSWR, cls

**
들어가기
1. front에서 모든 page에서 공통적으로 자주 사용하게 될, useUser hook을 만든다.
로그인된 사람의 정보를 확인하는 hook,

2. useSWR을 이용해서 useUser hook을 완성한다.
   https://swr.vercel.app/ko
   npm i swr -useSWR은 자동적 cache update로 페이지 로딩시 hook에서
   -받아오는 data가 바뀐게 없으면, hook을 실행하지 않고, update된
   -data가 있으면, 그 부분만 다시 가져온다.
   -졸라게 멋지게 잘 만들어놓았음..
   -API에서 DATA를 받아오는 component임
   **

1. libs/client/utils.ts

export function cls(...classnames: string[]) {
  return classnames.join(' ')
}

front에서 A ? B : C
에서 UI에서 A는 공통적으로 들어가고, 조건에 따라 B, C가 적용되는
tailwindCss 적용되는 hook

2. libs/client/useUser.ts

loggedInUser를 확인하는 hook
useSWR을 이용함.

import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import useSWR from 'swr' ///useSWR import하는 부분

export default function useUser() {
  const { data, error } = useSWR('/api/users/me')
  ///api주소로 fetch해서 data와 error를 받아옴
  ///argument로 url과 fetcher 함수 두개를 받아야 되는데,
  ///fetcher 함수는 모든 useSWR에 공통적으로 사용되어서 pages/_app.tsx에 널어줌.
  
  const router = useRouter()
  useEffect(() => {
    if (data && !data.ok) {
      router.replace('/enter')
    }
  }, [data, router])
  ///router를 이용해서 data가 있지만, ok가 없으면 login 페이지로 보냄.
  ///[data, router]부분 명심해서 봐 둘것.
  
  return { user: data?.profile, isLoading: !data && !error }
  ///useSWR을 이용해서 받은 data를 user에 담아서return 시킴.
  ///isLoading이라는 prop도 같이 보내줌.
  
  ----->여기서부터는 useSWR을 사용하지 않을 경우 처리방식!!
  //   const [user, setUser] = useState()
  //   useEffect(() => {
  //     fetch('/api/users/me')
  //       .then((response) => response.json())
  //       .then((data) => {
  //         if (!data.ok) {
  //           return router.replace('/enter')
  //         }
  //         setUser(data.profile)
  //       })
  //   }, [router])
}

3. pages/_app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { SWRConfig } from 'swr' ///swr로부터 SWRCONFIG를 import함.

function MyApp({ Component, pageProps }: AppProps) {
  return (
  ///맨 상단에 SWRConfig로 묶어주고, value에 fetcher함수를 넣어줌.
  ///fetcher함수는 아래 모양으로 일정함.
    <SWRConfig
      value={{
        refreshInterval:2000,  ///2초마다 refresh하게 하는 option
        fetcher: (url: string) =>
          fetch(url).then((response) => response.json()),
      }}
    >
      <div className="w-full max-w-lg mx-auto">
        <Component {...pageProps} />
      </div>
    </SWRConfig>
  )
}

export default MyApp

notice!!!
useSWR은 진짜 좋은 component이기 떄문에, 잘 봐두자!!!!