React Native에서 Alert(알림 창) 사용하는 방법 완벽 가이드

React Native의 Alert 컴포넌트는 사용자에게 제목, 메시지, 버튼으로 구성된 팝업 대화 상자를 표시하고, 화면에 나타난 메시지를 바탕으로 사용자의 확인(컨펌)을 받을 수 있도록 도와주는 기능입니다.

Alert 컴포넌트의 기본 문법

Alert의 기본적인 사용 형태는 다음과 같습니다.

Alert.alert('제목', '메시지', [버튼 배열], '옵션')

Alert 컴포넌트를 사용하려면 먼저 react-native에서 임포트해야 합니다.

import { Alert } from 'react-native';

Alert.alert()의 매개변수

팝업을 띄우려면 단순히 Alert.alert() 함수를 호출하기만 하면 됩니다. 이 함수는 총 네 개의 매개변수를 받으며, 각각 다음과 같습니다.

• title(제목): 필수 매개변수입니다.
• message(메시지): 선택 사항입니다.
• buttons(버튼): 선택 사항입니다.
• options(옵션): 선택 사항입니다.

다음은 Alert.alert()를 사용하는 간단한 예시입니다.

Alert.alert(
    "Hi",
    "Do you want to continue?",
    [
        {
            text: "Later",
            onPress: () => console.log("User pressed Later")
        },
        {
            text: "Cancel",
            onPress: () => console.log("Cancel Pressed"),
            style: "cancel"
        },
        { text: "OK",
            onPress: () => console.log("OK Pressed")
        }
    ],
    { cancelable: false }
);

위 예시에서 제목은 'Hi', 메시지는 'Do you want to continue?'이며, 대화 상자에는 Later, Cancel, OK 세 개의 버튼을 표시합니다. 각 버튼에는 onPress 이벤트가 등록되어 있어, 버튼을 누르면 콘솔에 해당 메시지가 출력됩니다.

마지막 매개변수인 options는 팝업의 동작 방식을 제어하는 데 사용됩니다. Android에서는 기본적으로 팝업 영역 바깥을 클릭하면 팝업이 자동으로 닫힙니다. 이 동작을 막고 싶다면 { cancelable: false }를 옵션으로 지정하면 됩니다. cancelable이 false로 설정되어 있으면 팝업 바깥을 클릭해도 대화 상자가 닫히지 않습니다.

iOS와 Android의 버튼 처리 차이

iOS에서는 원하는 만큼 버튼을 자유롭게 추가할 수 있지만, Android에서는 최대 세 개의 버튼만 사용할 수 있습니다. Android의 세 버튼은 각각 중립(neutral), 부정(negative), 긍정(positive)이라는 개념으로 매핑됩니다.

• 버튼 1개 지정 시: 'positive' 버튼으로 처리됩니다. 예: 'OK'

• 버튼 2개 지정 시: 첫 번째는 'negative', 두 번째는 'positive'로 처리됩니다. 예: 'Cancel', 'OK'

• 버튼 3개 지정 시: 순서대로 'neutral', 'negative', 'positive'로 처리됩니다. 예: 'Later', 'Cancel', 'OK'

예제 1: Alert 박스 표시하기

아래는 Alert 컴포넌트의 실제 동작을 보여주는 전체 실행 예제입니다.

import React from 'react';
import { Button, View, Alert } from 'react-native';
const App = () => {
    const testAlert = () =>
    Alert.alert(
        "Hi",
        "Do you want to continue?",
        [
            {
                text: "Later",
                onPress: () => console.log("User pressed Later")
            },
            {
                text: "Cancel",
                onPress: () => console.log("Cancel Pressed"),
                style: "cancel"
            },
            { text: "OK",
                onPress: () => console.log("OK Pressed")
            }
        ],
        { cancelable: false }
    );
    return (
        <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
            <Button
                title="Click Me"
                color="#9C27B0"
                onPress={testAlert}
            />
        </View>
    );
}
export default App;

실행 결과

버튼을 클릭하면 제목, 메시지, 세 개의 버튼이 포함된 알림 창이 화면 중앙에 나타납니다. cancelable이 false이므로 팝업 바깥을 눌러도 닫히지 않고, 반드시 버튼 중 하나를 눌러야 닫힙니다.

예제 2: Android에서 { cancelable: true } 사용하기

다음 예제에서는 제목, 메시지, 버튼과 함께 { cancelable: true } 옵션을 사용했습니다.

Alert.alert(
    "Hi",
    "Do you want to continue?",
    [
        {
            text: "Later",
            onPress: () => console.log("User pressed Later")
        },
        {
            text: "Cancel",
            onPress: () => console.log("Cancel Pressed"),
            style: "cancel"
        },
        { text: "OK",
            onPress: () => console.log("OK Pressed")
        }
    ],
    { cancelable: true }
);

전체 실행 코드는 다음과 같습니다.

import React from 'react';
import { Button, View, Alert } from 'react-native';
const App = () => {
    const testAlert = () =>
    Alert.alert(
        "Hi",
        "Do you want to continue?",
        [
            {
                text: "Later",
                onPress: () => console.log("User pressed Later")
            },
            {
                text: "Cancel",
                onPress: () => console.log("Cancel Pressed"),
                style: "cancel"
            },
            { text: "OK",
                onPress: () => console.log("OK Pressed")
            }
        ],
        { cancelable: true }
    );
    return (
        <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
            <Button
                title="Click Me"
                color="#9C27B0"
                onPress={testAlert}
            />
        </View>
    );
}
export default App;

이 경우에는 팝업 영역 바깥을 클릭하면 알림 창이 닫힙니다.

실행 결과

정리

React Native의 Alert 컴포넌트는 별도의 라이브러리 설치 없이 react-native에서 바로 임포트해 사용할 수 있는 강력한 알림 기능입니다. 필수 값인 제목 하나만으로도 간단한 알림을 띄울 수 있으며, 메시지·버튼·옵션을 조합하면 사용자 확인 절차를 손쉽게 구현할 수 있습니다. 특히 Android 환경에서는 cancelable 옵션과 버튼 개수 제한(최대 3개)을 고려하여 설계하는 것이 좋습니다.