[React Native] Alert API

Alert API

들어가며

• 리액트 네이티브(React Native)에서 기본적으로 제공하는 Alert API에 대해 정리해본다.

 

Alert API

개념

• 사용자가 알림을 띄울 수 있도록 도와주는 API
• 기본적으로 네이티브(iOS와 Android) 알림 다이얼로그를 표시하는 데 사용된다.
• 사용자가 알림을 확인하거나 취소할 수 있도록 버튼을 구성할 수 있으며, 다양한 설정 방법을 지원한다.

 

사용법

기본 사용법

• @Alert@는 React Native에서 내장된 객체로, @alert()@ 메서드를 통해 알림을 띄울 수 있다.

import { Alert } from 'react-native';

Alert.alert('알림 제목', '알림 메시지');

 

버튼 추가하기

• @Alert@는 기본적으로 @[확인]@ 버튼만 제공하지만, 여러 버튼을 추가할 수 있다.
• 버튼을 추가하려면 3번째 인자로 버튼 배열을 전달한다.

import { Alert } from 'react-native';

Alert.alert(
  '경고',               // 제목
  '확인 버튼을 눌러주세요.',  // 메시지
  [
    {
      text: '취소',         // 버튼 텍스트
      onPress: () => console.log('취소 버튼 눌림'), // 버튼 눌렀을 때 실행될 함수
    },
    {
      text: '확인',
      onPress: () => console.log('확인 버튼 눌림'),
    },
  ]
);

 

⇒ @text@ : 버튼에 표시될 텍스트

⇒ @onPress@ : 버튼이 클릭되었을 때 실행될 함수

 

버튼 스타일 지정

• 각 버튼의 스타일을 지정할 수 있다.
• 버튼 스타일은 @style@ 속성으로 설정할 수 있으며 @default@, @destructive@, @cancel@ 값을 지정할 수 있다.

값	설명
@default@	기본 스타일
@destructive@	위험한 작업을 나타내는 스타일 (주로 빨간색 텍스트)
@cancel@	취소 스타일 (주로 회색 텍스트)

 

import { Alert } from 'react-native';

Alert.alert(
  '경고',
  '정말 삭제하시겠습니까?',
  [
    {
      text: '취소',
      style: 'cancel',  // 취소 버튼
    },
    {
      text: '삭제',
      style: 'destructive', // 삭제 버튼 (위험한 작업)
      onPress: () => console.log('삭제됨'),
    },
  ]
);

 

경고 메시지가 출력된 모습의 예 (Android)

 

참고 사이트

Alert · React Native