Touchables

WeatherApp을 완성이후 입력과 출력, 저장하는 기능을 구현하기 좋은 프로젝트는 toDo list로 모바일에서 toDo list를 어떻게 구현하는지 개발해 볼 것이다.

native에는 터치에 대한 components를 아래와 같이 따로 제공한다.

• TouchableOpacity
• TouchableHighlight
• TouchableNativeFeedback
• Pressablesable

해당 components들은 사용자와 모바일간 소통을 위해 고안되었기에 사용자로부터 발생한 이벤트(터치) 정보를 전달 받을 수 있다. 그리고 pressablesable은 향후 업데이트된 native버전에서 주로 사용해야하는 compnent로 권장되고 있다.

import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
export default function App() {
	const [working, setWorking] = useState(true);
  const travel = () => setWorking(false);
  const work = () => setWorking(true);
  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <View style={styles.header}>
        <TouchableOpacity>
          <Text style={styles.btnText}>Work</Text>
        </TouchableOpacity>
        <TouchableOpacity>
          <Text style={styles.btnText}>Trabel</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

TextInput

React Native는 브라우저 환경이 아니고 모바일 환경이기에 HTML처럼 textarea가 없다. 대신 모바일에서 text를 입력할 수 있는 component인 TextInput으로 모바일에 text를 입력할 수 있다.

import { TextInput } from "react-native";
export default function App() {
  const [text, setText] = useState("");
  const onChangeText = (payload) => setText(payload);

return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <View style={styles.header}>
        <TouchableOpacity onPress={work}>
          <Text
            style={{ ...styles.btnText, color: working ? "white" : theme.grey }}>Work
					</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={travel}>
          <Text
            style={{...styles.btnText, color: !working ? "white" : theme.grey}}>Travel
          </Text>
        </TouchableOpacity>
      </View>
      <TextInput
        onChangeText={onChangeText}
        value={text}
        style={styles.input}
        placeholder={working ? "Add a To Do" : "Where do you want to go?"}
      ></TextInput>
    </View>
  );
}

눈치 빠른 사람은 알겠지만 native라 할 수 있는 것은 보통 components들로만 이루어지고 나머지 개발 부분은 reactJS나 일반 JS로 이루어진다는걸 확인할 수 있다.

To Dos

그림과 같이 이제 work와 travel에 맞춰 입력할 수 있는 textBox까지 만들었다. 이제부터는 백엔드로 입력받은 text를 데이터를 저장하고 꺼내기 쉬운상태로 가공하여 저장을 해야한다.

입력된 text를 저장하기 위해서 TextInput component에 value와 onChagneText props를 추가한다.

<TextInput
        onChangeText={onChangeText}
        returnKeyType="done"
        value={text}
        style={styles.input}
        placeholder={working ? "Add a To Do" : "Where do you want to go?"}
      ></TextInput>

그리고 TextInput에 입력된 text는 onChagneText를 통해 setText state로 저장하여 현재 TextInput의 데이터를 유지한다. 이어서 TextInput에 입력된 데이터를 키보드 submit을 눌러 onSubmitEditing 이벤트를 발생 시키고 addToDo함수로 통해 toDos status상태를 업데이트 한다.