next.js에서 페이지 간 로딩

저는 미니멀리스트 웹사이트의 열렬한 지지자입니다. 애니메이션과 디자인이 포함된 과도하게 디자인된 웹사이트를 싫어하지는 않지만 자리가 있습니다. 애니메이션에 대해 말하자면, 원하는 한 가지는 페이지 간 이동과 데이터 로드를 처리하는 방법입니다.

next/router를 통한 로딩 처리

next /router의 뛰어난 기능 중 하나는 경로 변경 중에 발생하는 이벤트를 활용하는 기능입니다. 이는 로드를 처리하는 데 사용할 수 있음을 의미합니다. 그렇다면 우리에게 필요한 이벤트는 무엇일까요? 경로 변경 이벤트가 필요합니다.

routeChangeStart
routeChangeComplete
routeChangeError

이 세 가지 이벤트와 useEffect 및 useState를 사용하여 애플리케이션에서 각 경로 변경을 처리할 수 있습니다. 예를 들어

function Loading() {
  const router = useRouter();

  const [loading, setLoading] = useState(false);

  useEffect(() => {
      const handleStart = (url) => (url !== router.asPath) && setLoading(true);
      const handleComplete = (url) => (url === router.asPath) && setTimeout(() =>{setLoading(false)},2000);

      router.events.on('routeChangeStart', handleStart)
      router.events.on('routeChangeComplete', handleComplete)
      router.events.on('routeChangeError',  handleComplete)

      return () => {
          router.events.off('routeChangeStart', handleStart)
          router.events.off('routeChangeComplete', handleComplete)
          router.events.off('routeChangeError', handleComplete)
      }
  })

  return loading && (
    <div>loading</>
  )
}

무슨 일이야?

이제 살펴볼 예제가 있습니다. 로딩 기능을 만들기 위해 우리가 무엇을 하고 있는지 이야기해 봅시다. 먼저 loading의 상태를 부울로 설정합니다. 이를 통해 로드 여부를 쉽게 전환할 수 있으며, 그런 다음 useEffect를 사용하여 확인을 강화합니다. 여기서 useEffect에는 시작을 처리하는 함수와 완료될 때 처리하는 함수가 두 개 있습니다. 그런 다음 위에서 언급한 router.events를 사용하여 실행할 함수를 결정합니다. 시작하는 경우 로드를 true로 설정하는 handleStart를 실행해야 합니다. 그렇지 않으면 완료되었으며 로딩을 false로 설정해야 합니다.

마지막으로 실제로 로드 중인지 여부만 표시하는 조건부 렌더러가 있습니다.