[React Native] 노마드 코더 React Native 무료 강의 내용 정리 #3 Work hard travel hard app

 

#3.0 Introduction

- terminal에서 원하는 폴더로 가서 다음 코드를 친다

expo init WorkHardTravelHardApp --npm

-전에 했던거와 같이 아래 사진에서 그냥 blank에서 엔터친다.

 

#3.1 Touchables

 

- 우리가 만들 어플 디자인 링크

- 우선 맨 위의 'Groceries', 'Work' 라고 적혀있는 곳에 해당되는 헤더를 만들 예정.

- Styles 의 paddingVertical, paddingHorizontal 은 css에는 없는 속성들.

 

Button components

(1) TouchableOpacity : sort of a view(a box?) that is ready to accept or listen for pressing events. It has animation included. -> 터치하면 투명도? 애니메이션이 있음

(2) TouchableHighlight : has more props than touchableOpacity. Allows you to specify the background color when clicked. 

    - onPress 속성이 가장 중요. 유저가 touchable을 눌렀을 때 실행할 이벤트를 넣어야 함. 

    - onLongPress 등이 있음

<TouchableHighlight onPress={() => console.log("pressed")}>
   <Text style={styles.btnText}>Travel</Text>
</TouchableHighlight>

   - 요런식으로 onPress안에 뭐든지 넣어주기만 하면 눌렀을 때 투명도 변함.

(3) TouchableWithoutFeedback : 터치는 가능한데 ui는 아무런 변화가 없음.

(4) Pressable : 눌러도 아무런 변화 없음, 상대적으로 새로 나온 것. 다양한 props존재, 공식 문서에서 얘를 좀 더 가지고 갈 가능성이 보임 ( 나중엔 touchable은 사라질수도?)

 

 

#3.2 TextInput

keyboardType 속성 : 키보드의 타입을 바꿔준다.

<TextInput
    keyboardType="number-pad"
    placeholder={working ? "Add a To DO!" : "Where do you want to go?"}
    style={styles.input}
></TextInput>

이런식으로!

 

textinput에 쳐진 텍스트는 'onChangeText' props를 통해 알 수 있음.

const onChangeText = (event) => console.log(event);

<TextInput
        onChangeText={onChangeText}
        returnKeyType="send"
        placeholder={working ? "Add a To DO!" : "Where do you want to go?"}
        style={styles.input}
></TextInput>

 

#3.3 To Dos

- Object.assign(target, source, new) : combine 2 objects! -> useState()에 쓸 것

 

 

#3.4 Paint To Dos

- {객체} 와 {...객체} 의 차이

const obj = {asdf : "asdfff"};
const test1 = {...obj} //an object that has another object inside.
const test2 = {obj} //an object that has the content of obj object.

obj :  Object {
  "asdf": "asdfff",
}
test1 :  Object {
  "asdf": "asdfff",
}
test2 :  Object {
  "toDos": Object {
    "asdf": "asdfff",
  },
}

콘솔로 찍어보면 이렇게 차이가 났다.

객체 앞에 ...을 넣으면 그 내용만 들어가게 되고, ...을 넣지 않고 그냥 넣으면 키 값으로 객체명이, 밸류로 객체 전체가 들어가는 객체가 만들어진다.

 

- object.keys(obj) function : obj객체의 키들을 요소로 갖는 배열을 만들어줌!

const toDos = {"12345678": {text : "study CS", work: true}, "12345679": {text: "study NR", work: true}};

Object.keys(toDos); //["12345678", "12345679"]
Object.keys(toDos).map(key => toDos[key])
// 0: {text : "study CS", work: true}
// 1: {text: "study NR", work: true}

 

 

#3.5 Persist

- 데이터를 핸드폰에 저장해보자.

- expo 에서 asnycStorage 패키지를 사용할 것임. 링크 >

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

zsh 터미널에 위 코드 작성해주면 엑스포가 알아서 버전에 맞는 패키지 다운 받음.

- 그리고 react native 사이트에 가서 import 하는 코드 복붙

import AsyncStorage from '@react-native-async-storage/async-storage';

- localStorage랑 비슷한 역할. 키밸류값으로 들어가는데, value는 항상 stringify한 후에 사용해줘야함.

다음과 같이 사용함.

const saveToDos = async (toSave) => {
    await AsyncStorage.setItem("@toDos", JSON.stringify(toSave));
  };

key에는 앞에 '@' 넣어줌.

 

 

#3.6 Delete

- todo마다 버튼을 만들어서 삭제해볼것.

  const deleteToDo = async (key) => {
    //create a new toDos that 'without' the todo that has the parameter key
    const newToDos = { ...toDos };
    delete newToDos[key];
    
    setToDos(newToDos); //화면에 보여줄 todo리스트 저장
    await saveToDos(newToDos); //로컬 메모리에 새로운 todo 리스트 저장
  };

 

- Alert 사용해서 삭제하기 전 사용자에게 묻기. docs 링크 >

 

 

#3.7 Recap

- Everything starts from the header. - our's have touchableOpacity

1. TouchableOpacity : views that have an animation. 

   props : onPress 해당 뷰를 누를 때 일어날 일

2. '...'을 이용하면 객체의 '내용'만 가져오는 거임.

3. <TextInput>

props - 

    returnKeyType : 제출(엔터)키에 보여줄 것

    opChanageText : 텍스트가 바뀔 때, 사용자가 뭘 칠 때 

    onSubmitEditing : 제출(엔터)키 눌렀을 때

4. Alert : text, onPress, style(only ios)

 

 

#3.8 Code Challenge

1. work, travel 중 사용자가 마지막으로 있던 모드로 켜지기 (async사용)

2. 투두를 완료했는지 안했는지 체크 (todos에 completed: true/false등 추가)

** We should not mutate the state!

3. Allow the user to edit the text!