본문으로 건너뛰기

Alert

사용자에게 중요한 메시지를 전달하거나, 모달로부터 사용자의 응답을 받을 때 사용되는 알림 컴포넌트입니다.

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

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

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

AlertOverlay 렌더러​

AlertOverlay는 OverlayProvider가 Alert 상태를 화면에 그릴 때 사용하는 렌더러 컴포넌트입니다. 공개 export에는 포함되지만 Alert Context와 뒤로가기 우선순위에 의존하므로 앱 화면에서 직접 마운트하지 않습니다. 표시와 닫기는 useOverlay().showAlert()와 hideOverlay('alert')를 사용하세요.

기본 사용법​

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

function MyComponent() {
  const { showAlert } = useOverlay();

  const handleShowAlert = () => {
    showAlert({
      title: '확인',
      informative: '이 작업을 계속하시겠습니까?',
      actions: {
        primary: {
          label: '확인',
          onPress: () => console.log('확인'),
        },
        secondary: {
          label: '취소',
          onPress: () => console.log('취소'),
        },
      },
    });
  };

  return <Button title="Alert 표시" onPress={handleShowAlert} />;
}

API 참조​

showAlert 함수​

showAlert 함수는 Alert 알림을 표시하는 데 사용됩니다.

showAlert(props: ShowAlertProps): void

ShowAlertProps 인터페이스​

PropTypeDefaultDescription
titlestringundefined알림의 제목
informativestringundefined알림의 설명 메시지
actionsAlertActionsundefined알림에 표시할 액션들 (기본 및 보조 버튼)
isBackgroundTouchClosebooleantrue배경을 터치하면 알림이 닫히는지 여부
titleStyleTextProps['style']undefined알림 제목의 커스텀 스타일
informativeStyleTextProps['style']undefined설명 메시지의 커스텀 스타일
secondaryButtonStyleTouchableOpacityProps['style']undefined보조 버튼의 커스텀 스타일
primaryButtonStyleTouchableOpacityProps['style']undefined기본 버튼의 커스텀 스타일
secondaryButtonTextStyleTextProps['style']undefined보조 버튼 텍스트의 커스텀 스타일
primaryButtonTextStyleTextProps['style']undefined기본 버튼 텍스트의 커스텀 스타일

AlertActions 인터페이스​

interface AlertActions {
  primary: AlertAction;
  secondary?: AlertAction;
}

AlertAction 인터페이스​

interface AlertAction {
  label: string;
  onPress?: () => void;
}

특징​

  • 모달 알림: 사용자의 주의를 끌기 위한 모달 형태의 알림
  • 액션 버튼: 기본 버튼과 보조 버튼을 통해 사용자 응답 수집
  • 커스터마이징: 버튼 스타일과 텍스트 스타일을 자유롭게 설정 가능
  • 배경 터치 제어: 배경 터치로 닫기 여부를 설정할 수 있습니다

예제​

단일 버튼 Alert​

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

function MyComponent() {
  const { showAlert } = useOverlay();

  const handleShowAlert = () => {
    showAlert({
      title: '알림',
      informative: '작업이 완료되었습니다.',
      actions: {
        primary: {
          label: '확인',
          onPress: () => console.log('확인'),
        },
      },
    });
  };

  return <Button title="Alert 표시" onPress={handleShowAlert} />;
}

두 개의 버튼 Alert​

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

function MyComponent() {
  const { showAlert } = useOverlay();

  const handleDelete = () => {
    showAlert({
      title: '삭제 확인',
      informative: '이 항목을 삭제하시겠습니까?',
      actions: {
        primary: {
          label: '삭제',
          onPress: () => {
            // 삭제 로직
          },
        },
        secondary: {
          label: '취소',
          onPress: () => {
            // 취소 로직
          },
        },
      },
    });
  };

  return <Button title="삭제" onPress={handleDelete} />;
}

커스텀 스타일​

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

function MyComponent() {
  const { showAlert } = useOverlay();

  const handleShowAlert = () => {
    showAlert({
      title: '경고',
      informative: '이 작업은 되돌릴 수 없습니다.',
      actions: {
        primary: {
          label: '삭제',
          onPress: () => console.log('삭제'),
        },
        secondary: {
          label: '취소',
          onPress: () => console.log('취소'),
        },
      },
      primaryButtonStyle: {
        backgroundColor: '#e74c3c',
        padding: 10,
      },
      secondaryButtonStyle: {
        backgroundColor: '#95a5a6',
        padding: 10,
      },
      secondaryButtonTextStyle: {
        color: '#fff',
        fontWeight: 'bold',
      },
    });
  };

  return <Button title="경고 표시" onPress={handleShowAlert} />;
}

배경 터치로 닫기 비활성화​

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

function MyComponent() {
  const { showAlert } = useOverlay();

  const handleShowAlert = () => {
    showAlert({
      title: '중요한 알림',
      informative: '이 알림은 배경을 터치해도 닫히지 않습니다.',
      isBackgroundTouchClose: false,
      actions: {
        primary: {
          label: '확인',
          onPress: () => console.log('확인'),
        },
      },
    });
  };

  return <Button title="Alert 표시" onPress={handleShowAlert} />;
}

Alert 닫기​

Alert는 버튼을 누르거나 배경을 터치하면 자동으로 닫힙니다. 프로그래밍 방식으로 닫으려면:

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

const { hideOverlay } = useOverlay();

hideOverlay('alert');