자주 사용하는 react-native 태그 알아보기 -Alert

웹에서 개발할 땐 window.alert를 활용해서 간단한 안내나 경고 문구를 띄워주곤 하는데 이를 react-native에서는 어떻게 활용할까?

 

Alert · React Native

 

위와 같은 컴포넌트가 역시 존재한다.

Alert.alert("아이디와 비밀번호를 모두 입력해주세요", [{ text: "OK", onPress: () => console.log("OK Pressed") }]);

위 처럼 간단하게 코드를 작성할 수 있다. 

 

 

 

 

 

여기서 특이점이 존재하는데,

Alert.alert(
      "로그아웃 하시겠습니까",
      "클릭",
      [
        { text: "아니오", onPress: () => console.log("안해 로그아웃"), style: "cancel" },
        { text: "로그아웃", onPress: () => console.log("로그아웃 해야지") },
        ,
      ],
      { cancelable: false }
    );

두번째 타이틀이 있으면 버튼을 두개로 형성할 수 있다. 하지만 두번째 타이틀이 없다면 버튼 text를 두개 작성해도 생성이 되지 않는다.

Alert.alert(
      "로그아웃 하시겠습니까",
      [
        { text: "아니오", onPress: () => console.log("안해로그아웃"), style: "cancel" },
        { text: "로그아웃", onPress: () => console.log("로그아웃해야지") },
        ,
      ],
      { cancelable: false }
    );

 

iOS에서는 두번째 타이틀이 없어도 정상적으로 실행되지만, android에서는 무조건 존재해야지만 정상 작동 된다.