[왕초보를 위한 React Native 101] Travel hard app

$ npx create-expo-app --template

What is your app named? 앱이름

 

react native는 css가 가지지 않은 속성을 가진다

ex) padding 세로, 가로로 주기

paddingHorizontal: 20,
paddingVertical: 20

 

TouchableOpacity는 누른 요소를 약간 투명해지게 만든다

<TouchableOpacity activeOpacity={0}> // 투명도 조절 가능

 

TouchableHighlight는 요소 클릭하면 배경색이 바뀌게 해 준다

onPress는 유저가 Touchable 눌렀을 때 실행되는 이벤트

onPressOut은 손가락이 영역 벗어날 때 실행

underlayColor로 배경색 지정

 

TouchableWithoutFeedback은 화면의 가장 위에서 일어나는 탭 이벤트 listen

그래픽이나 다른 UI 변화 X

 

Pressable을 사용하면 더 섬세한 설정 가능

delayLongPress는 얼마나 길게 누르면 반응하게 할지 설정

hitSlope는 요소 바깥 어디까지 탭 누르는 것을 감지할지 결정

 

스타일을 object로 사용하면서 동시에 확장하는 방법 ↓

<Text style={{...styles.btnText}}>

이렇게 하면 button text의 모든 스타일을 가져다주고 내가 원하는 스타일 추가도 가능

style={{ ...styles.btnText, color: working ? "white" : theme.grey }}

 

text input은 유저가 text를 쓸 수 있는 유일한 방법

onChangeText는 우리가 입력한 Text를 받을 수 있다

keyboardType은 이메일이나 핸드폰 번호처럼 키보드 타입 바꿀 수 있게 해 준다

secureTextEntry는 비밀번호 입력 (● ● ● ● ● ●)

multiline은 한 줄 이상 쓰는 경우 사용하는데 유저가 텍스트처럼 글을 쓸 수 있다

placeholderTextColor은 placeholder의 색상 변경

 

이전 object를 가진 새로운 object를 만들고 새로운 todo 추가

const newToDos = { 
      ...toDos, 
      [Date.now()]: { text, work: working } };

todo를 paint 하려면 object의 key들을 얻고 각 키를 map 하면 그 key로 object에서 내용 찾기 가능

 

AsyncStorage

브라우저의 local storage처럼 작동

문자열 데이터만 저장 가능하기 때문에 객체 데이터를 저장하려면 먼저 직렬화를 해야 한다

JSON으로 직렬화할 수 있는 데이터라면 JSON.stringify() 사용하고 데이터 로드할 때 JSON.parse() 사용

parse는 string을 Javascript object로 만들어 주는 것

try-catch문 사용하는 게 저장하는 데 문제방지를 위해 좋다

expo install @react-native-async-storage/async-storage

const saveToDos = async (toSave) => {
  await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(toSave));
};
const loadToDos = async () => {
  const s = await AsyncStorage.getItem(STORAGE_KEY);
  setToDos(JSON.parse(s));
};

 

Alert API는 대화창 실행

- alert()

- prompt() : iOS에서만 작동 가능

Alert.alert("Delete To Do", "Are you sure?",...