💻[React Native] Expo로 TodoList 만들기3-TextInput, useCallback(+alert)

📌 TextInput으로 입력한 값 handling

입력한 내용을 원래 있던 List에 대입

export default function App() {
  const [list, setList] = useState(["할일 1", "할일 2"]);
  const [inputText, setInputText] = useState("");
  return (
    <SafeAreaView style={styles.container}>
      <Padding padding={12}>
        {list.map((item) => (
          <TodoItem key={item} label={item} />
        ))}
        <Row>
          <TextInput
            style={styles.input}
            value={inputText} //inputText를 value로 가짐
            onChangeText={(text) => setInputText(text)} 
            //text가 변하면 setInputText에 대입
          />
          <Button
            title="Send"
            onPress={() => {
              setList([...list, inputText]); 
		//List에 원래 있던 list목록 다음에 TextInput의 value값인 inputText를 넣음
            }}
          />
        </Row>
      </Padding>
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

📌 useCallback: Rendering을 할 때 다시 그려지거나 중복되는 경우

렌더링을 일어난다고 해도 위의 목록 부분은 똑같이 다시 그려지는 부분이고, 현재 입력되는 TextInput에서만 새로운 렌더링이 일어남
onPress의 입력함수도 렌더링을 할 때마다 함수가 하나씩 만들어냄
필요할 때 필요한 만큼만 만들 수 있다고 한다면, 훨씬 성능이 좋아질 것!

  const addItem = useCallback(() => {
     if (list.includes(inputText)) {
      return alert("이미 등록된 항목입니다.");
    } // inputText에 이미 들어있는 내용이면 alert을 띄우도록 *includes!!
    setList([...list, inputText]);
  }, [list, inputText]);
//list 또는 inputText의 변화가 생기면, setList함수가 만들어져 호출됨

정확하게 필요한 범위를 지정한 후 그것만큼만 동작을 하도록 만들 수 있고 그 외 동작들은 반복적인 불필요한 동작들은 하지 않을 수 있음

📌 React Native 기본 alert Component 사용하기

const addItem = useCallback(() => {
    if (list.includes(inputText)) {
      return Alert.alert('오류', "이미 등록된 항목입니다.");
    }
    setList([...list, inputText]);
  }, [list, inputText]);

이때 Alert Component는 title을 지정할 수 있음
Alert.alert('타이틀', '경고 내용')