next loading UI

 프론트엔드 작업을 하다보면 데이터를 받아오는 과정에서 로딩하는 동안 클라이언트에게 로딩 UI를 제공하는 것에 대하여 고민을 하게 된다. next에서는 아주 간단하게 로딩 UI를 제공할 수 있는데 그 방법에 대해서 알아보자.

 React를 공부하고 next.js를 공부하는 사람들에게 이 로딩 UI가 동작하는 방법을 간단하게 설명해주면 React 18에서 제공하는 Suspense를 통해서 동작한다. React에서는 React.lazy()와 Suspense를 통해 레이지 로딩되는 것에 대한 로딩 처리를 해주는데 이 방식을 next.js에서는 매우 간단하게 구현이 가능하도록 만들어 놓은 것이다.

export default function Loading() {
  // Or a custom loading skeleton component
  return <p>'Loading...'</p>
}

 내가 로딩처리를 하고자 원하는 경로에 위와 같은 loading.tsx 파일을 만들어주면 끝! 그럼 next.js 자동으로 해당 경로에 해당하는 레이아웃 안에서 로딩 UI를 그려준다. 공식문서에도 위의 에제만 나올 정도로 매우 간단하게 구현 가능하다!!