[RN공부하기] [11]Alerts

(1) 공식문서 한번 훓어 본다.

https://reactnative.dev/docs/alert

Alert · React Native

//이렇게 추가한다.
import { View, StyleSheet, Button, Alert } from "react-native";

 

 

Alert.메소드 이런식으로 사용한다. 관련 메서드로는

• alert() : static alert(title, message?, buttons?, options?)
• prompt() : static prompt(title, message?, callbackOrButtons?, type?, defaultValue?, keyboardType?)

Native앱에서 Javascript의 alert함수를 쓰는게 아닌것 같다.

 

(2) 실제적용해보자.

//App.js 추가
import { View, StyleSheet, Alert  } from 'react-native';

//App.js
const SubmitHandler = (text) => {
    console.log(text);
    if(text.length > 3){
      nextId.current = parseInt(nextId.current)+1;
      /*
      setTodos( (prevTodos)=> {
        return [
          ...prevTodos,
          {todo: text, key : nextId.current.toString() }
          
        ];
      })
      */
      
      const newtodo = {
        todo: text,
        key : nextId.current.toString()
      };
      setTodos([...todos, newtodo]);
    } else {
      Alert.alert(
        "Alert Title",
        "My Alert Msg",
        [
          {
            text: "Cancel",
            onPress: () => console.log("Cancel Pressed"),
            style: "cancel"
          },
          { text: "OK", onPress: () => console.log("OK Pressed") }
        ]
      );
    }
  }

text의 길이가 3보다 작을경우 Alert창을 띄우려고 했는데 계속 안되서 이상하다 생각했는데, 현재 웹으로 테스트 해서 확인이 안된것 같다. 나중에 집에서 앱으로 테스트 해보자!