본문으로 건너뛰기

Loader

진행 중인 프로세스를 사용자에게 시각적으로 표시하여, 작업이 완료될 때까지 사용자의 행동을 제어할 수 있는 로딩 컴포넌트입니다.

실제 앱 추가 검증

웹에서 표시·숨김과 상호작용 차단을 확인할 수 있습니다. Android 하드웨어 뒤로가기를 소비하면서 Loader를 유지하는 동작은 실제 Android 앱에서 확인하세요.

앱 예제 Playgroundv1.0.2
소스 보기새 창에서 열기
Interactive exampleLoader 로컬 웹 예제

예제를 선택하면 현재 저장소 소스로 만든 Expo Web 화면을 불러옵니다.

웹 미지원 또는 플랫폼 종속 기능은 실제 iOS·Android 앱에서 확인하세요.

기본 사용법​

import { useOverlay } from '@0610studio/zs-ui';

function MyComponent() {
  const { showLoader, hideOverlay } = useOverlay();

  const handleShowLoader = () => {
    showLoader();
    
    // 예시: 3초 후에 로더 숨기기
    setTimeout(() => {
      hideOverlay('loader');
    }, 3000);
  };

  return <Button title="Loader 표시" onPress={handleShowLoader} />;
}

API 참조​

showLoader 함수​

showLoader 함수는 Loader를 표시하는 데 사용됩니다. 이 함수는 인수를 받지 않으며, 호출 시 로더가 화면에 표시됩니다.

showLoader(): void

hideOverlay 함수​

hideOverlay 함수는 특정 유형의 오버레이를 숨기는 데 사용됩니다. Loader를 숨기기 위해서는 'loader'를 인수로 전달합니다.

hideOverlay(option: HideOption): void

HideOption 타입:

  • 'loader' – Loader를 숨깁니다
  • 'all' – 모든 오버레이를 숨깁니다

특징​

  • 전체 화면 오버레이: 화면 전체를 덮어 다른 상호작용을 차단합니다
  • 커스터마이징 가능: OverlayProvider에서 커스텀 로더 컴포넌트를 사용할 수 있습니다
  • 간단한 API: showLoader()와 hideOverlay('loader')로 쉽게 제어 가능

예제​

비동기 작업과 함께 사용하는 기본 패턴입니다.

const { showLoader, hideOverlay } = useOverlay();

const handleAsyncOperation = async () => {
  showLoader();
  try {
    await performLongOperation();
  } finally {
    hideOverlay('loader');
  }
};