노마드 코더 REACT NATIVE 강의 정리 3

https://nomadcoders.co/react-native-for-beginners

왕초보를 위한 React Native 101 – 노마드 코더 Nomad Coders

 

노마드 코더 React Native강의를 보고 요약 정리하는 글

 

Touchables

 

• TouchableOpacity: 버튼 클릭 시 투명도 변화
• TouchableHighlight: 배경 색상 변경 가능
• TouchableWithoutFeedback: UI 변화 없음, 클릭 이벤트만 수신
• Pressable: 신규 컴포넌트로 더 많은 설정 가능

 

spread연산자를 통해서 선택했을때 글자색 css 변경

        <TouchableOpacity onPress={work}>
          <Text style={{ ...styles.btnText, color: working ? "white" : theme.gray }}>Work</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={travel}>
          <Text style={{ ...styles.btnText, color: working ? theme.gray : "white" }}>Travel</Text>
        </TouchableOpacity>

 

TextInput

 

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

 

키보드를 통해 앱에 텍스트를 입력하기 위한 기본 컴포넌트

1. • placeholder 속성을 사용하여 입력 필드에 힌트를 제공한다.
   • keyboardType 속성을 이용해 키보드 타입을 설정할 수 있다(숫자, 이메일 등)
   • returnKeyType를 사용하여 리턴 키의 동작을 설정한다(전송, 검색 등).
   • autoCapitalize 속성으로 입력 텍스트의 자동 대문자화를 설정할 수 있다  
   • secureTextEntry 속성을 사용하여 비밀번호 입력 시 보안 문자로 처리할 수 있다.

https://reactnative.dev/docs/textinput

TextInput · React Native

 

 

Spread vs Object.assign

 

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

 

Object.assign은 타겟을 지정한 객체로 다른 객체의 속성을 복사한다.

Spread는 배열이나 문자열 등을 아래처럼 풀어서 요소 하나 하나로 전개시킬 수 있습니다.

 

불변성(immutable)을 지켜야 된다면 Object.assign을 사용하는 것 보다 스프레드 연산자를 사용하는 것이 좋다.

Object.assign으로 불변성을 지키려면 target에 항상 {} 빈 객체를 인자로 전달해야 하기때문.

 

async-storage

 

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

 

todo리스트를 앱을 껏다켜도 유지하기 위해 async storage사용

 

  const saveToDos = async (toSave) => {
    try {
      const s = JSON.stringify(toSave)
      await AsyncStorage.setItem(STORAGE_KEY, s)
    } catch (e) {
      alert("할 일 저장하다가 에러남")
    }
  }
  
  const loadTodos = async () => {
    try {
      const s = await AsyncStorage.getItem(STORAGE_KEY)
      setToDos(JSON.parse(s))
    } catch (e) {
      alert("할 일 불러오다가 에러남")
    }
  }

 

자바스크립트에서 로컬스토리지 쓰는 거랑 매우 유사하다

 

delete

 

delete 연산자

delete 연산자는 객체의 속성을 제거

  const deleteTodo = async (key) => {
    const newToDos = { ...toDos };
    delete newToDos[key];
    setToDos(newToDos);
    await saveToDos(newToDos);
  }

 

Alert

지정된 제목과 메시지로 경고 대화 상자를 실행

  const deleteTodo = (key) => {
    Alert.alert("할 일 삭제", "정말 삭제하시겠습니까?", [
      { text: "취소" },
      {
        text: "삭제", onPress: () => {
          const newToDos = { ...toDos };
          delete newToDos[key];
          setToDos(newToDos);
          saveToDos(newToDos);
        }
      },
    ])
  }

 

강의보며 만든 todo앱 스크린샷

코드 챌린지

 

1. 앱 재실행시, 마지막 상태의 Work 또는 Travel 기억하기
2. Todo에 완료 기능 추가하기
3. Todo에 수정 기능 추가하기

 

(내일해야지)