Next.js 14 시작하기 #13 Loading UI

loading.js

• 이 파일은 특정 라우트 세그먼트에서 컨텐츠가 로드되는 동안 사용자에게 보여지는 로딩 상태를 만들기 위한 것
• 사용자가 새로운 페이지로 이동할 때 바로 로딩 상태가 나타나서 애플리케이션이 반응하고 있고 컨텐츠를 활발히 로드하고 있다는 것을 보장해줌. 이는 사용자에게 애플리케이션이 응답성이 있으며 활동적으로 작동하고 있음을 알려줌
• 예를 들어 /blog 라우트 세그먼트에서 컨텐츠가 로딩 될 때 까지 로딩페이지를 만들고 싶다면 아래와 같이 간단하게 표현할 수 있다.

// app/blog/loading.js
export default function Loading() {
  return <h1>Loading...</h1>
}

loading.js를 사용하면 좋은 점

• 사용자가 새로운 루트로 이동할 때 로딩 상태를 바로 표시할 수 있음.
• 새로운 루트 세그먼트가 로딩되는 동안에도 상호작용이 가능한 공유 레이아웃을 만들 수 있도록 함. 레이아웃은 로드 된 상태이므로 네비게이션 메뉴나 사이드바 같은 요소들과 계속적인 상호작용이 가능함