(React)데이터 로딩 상태를 표시하는 방법

데이터 로딩 상태를 표시하는 방법은 사용자 경험(UX)을 개선하는 중요한 요소다. 일반적으로 다음과 같은 방법들이 사용된다.

---

1. 스피너 (Spinner) 사용

• 로딩 중임을 시각적으로 알릴 수 있는 가장 간단한 방법.
• 보통 react-loading 같은 라이브러리를 사용하거나 CSS 애니메이션으로 직접 구현 가능.

✅ 예제 (ShadCN + Tailwind)

 

import { Loader2 } from "lucide-react"

const LoadingSpinner = () => {
  return (
    <div className="flex justify-center items-center h-20">
      <Loader2 className="h-8 w-8 animate-spin text-gray-500" />
    </div>
  )
}

export default LoadingSpinner


##다른 페이지에서 사용시

{isLoading && <LoadingSpinner />}

⚡ 라이브러리 필요: lucide-react (npm install lucide-react)

 

---

2. Skeleton UI (스켈레톤 로딩)

• 실제 콘텐츠의 레이아웃을 미리 보여줘서 화면 깜빡임을 줄이는 기법.
• 콘텐츠가 로드되기 전에 흐릿한 박스를 보여주는 방식.

✅ 예제 (ShadCN)

import { Skeleton } from "@/components/ui/skeleton"

const MenuSkeleton = () => {
  return (
    <div className="space-y-4">
      <Skeleton className="h-6 w-32" />
      <Skeleton className="h-4 w-24" />
      <Skeleton className="h-20 w-full rounded-lg" />
    </div>
  )
}

{isLoading ? <MenuSkeleton /> : <MenuItemCard item={item} />}

⚡ ShadCN의 Skeleton 컴포넌트 사용

---

3. 로딩 메시지 표시

• 단순한 텍스트로 "로딩 중..."을 보여줌.

✅ 예제

{isLoading ? <p className="text-gray-500 text-center">로딩 중...</p> : <MenuList />}

 

---

4. Progress Bar (프로그레스 바)

• 페이지 이동 중이나 큰 데이터를 불러올 때 유용.
• nprogress 같은 라이브러리를 사용하면 편리.

✅ 예제 (nprogress 라이브러리 사용)

1️⃣ 설치:

 

npm install nprogress

2️⃣ 코드 적용:

 

 

import NProgress from "nprogress"
import { useEffect } from "react"

const useLoadingIndicator = (isLoading: boolean) => {
  useEffect(() => {
    if (isLoading) {
      NProgress.start()
    } else {
      NProgress.done()
    }
  }, [isLoading])
}

......
.....
useLoadingIndicator(isLoading)

⚡ 페이지 전환 중 로딩 표시 가능 (next/router 사용 가능)

---

5. Lazy Loading (지연 로딩)

• Next.js에서는 React.lazy()나 next/dynamic()을 사용하여 필요한 부분만 로드 가능.

✅ 예제 (next/dynamic 사용)

import dynamic from "next/dynamic"

const LazyComponent = dynamic(() => import("@/components/HeavyComponent"), {
  loading: () => <p>로딩 중...</p>,
})

<LazyComponent />

⚡ 무거운 컴포넌트의 로딩 속도 최적화

---

결론 (언제 어떤 방법을 써야 할까?)

상황추천 기법

API 호출 중	Spinner / Skeleton UI
데이터가 많을 때	Skeleton UI
페이지 이동 중	Progress Bar (nprogress)
무거운 컴포넌트	Lazy Loading (next/dynamic)

위 방법 중 프로젝트에 맞는 방식으로 적용하면 될 것 같아요! 🚀
어떤 방식이든 적용할 때 사용자 경험을 고려해서 부드러운 전환이 되도록 하면 좋습니다. 😊