Next.js Page Router 로딩 처리

🎀 문제 상황

next js를 app router부터 사용해 봤던 나는
당연히 로딩을 위한 컴포넌트를 loading.tsx라고 지정해 넣어 주었다.

하지만 페이지 로딩될 때 암만 살펴 보아도
내가 설정해준 loading 파일이 나오지 않았음.

🎀 page router에서는 이렇게 해야해

page router에서 페이지 로딩을 보여주고 싶다면 아래와 같이 작성해 주어야 한다.

_app.tsx

...

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

useEffect(() => {
  const start = () => {
    setLoading(true);
  };

  const end = () => {
    setLoading(false);
  };

    router.events.on('routeChangeStart', start);
    router.events.on('routeChangeComplete', end);
    router.events.on('routeChangeError', end);

    return () => {
      router.events.off('routeChangeStart', start);
      router.events.off('routeChangeComplete', end);
      router.events.off('routeChangeError', end);
    };
  }, []);

return (

    ...

    <Layout>{loading ? <Loading /> : <Component {...pageProps} />}</Layout>
    ...
)

...

• useEffect 훅을 사용하여 컴포넌트가 마운트될 때 라우터 이벤트를 등록
• routeChangeStart 이벤트가 발생하면 start 함수가 호출되어 loading 상태를 true로 설정.
• routeChangeComplete 및 routeChangeError 이벤트가 발생하면 end 함수가 호출되어 loading 상태를 false로 설정.
• 클린업 함수는 컴포넌트가 언마운트될 때 이벤트 리스너를 제거한다.

위와 같은 방식으로 loading 컴포넌트를 보여주고 숨겨줄 수 있다.