NextJS Router 이동 중 Loading창

페이지 이동 간 로드 페이지 작성이 되어 있지 않았다.
그로 인해, 나라장터 API 호출하는 동안 페이지는 아무반응이 없어 사용하는 내 입장에서 사이트가 멈춘 건지, 아니면 외부 자료를 로드하는 중인지 알기 어려웠다.

그래서, API 받는 중 로드 화면을 만들었다.
NextJS 공식문서 중, Router의 Events메소드는 Link태그를 통한 url이동을 감지한다. 이를 통해 페이지 이동 효과를 구현할 수 있다.

Route Event는 총 3가지 상태가 있다
=> routeChangeStart : 라우터의 변화감지
=> routeChangeComplete : 라우터에 의한 변화 종료
=> routeChangeError : 라우팅 에러발생 시

3가지 경우를 router.events.on('이벤트명', 함수)로 표현하며, 각 이벤트는 router.events.off('이벤트명', 함수)를 통해 종료한다.

참고 : https://www.youtube.com/watch?v=Dgnr3akrMHg
(해당 영상은 useRoute를 쓰지 않고 Router 컴포넌트를 쓰면서 useEffect를 사용하지 않는다.)