노마드 코더 RN 왕초보 개발기 RN 배우기! 과정기 4일 차

SiWooJinSeok/nomad-RN: 노마드 초보 RN 공부용 (github.com)

3.1강

• TouchableOpacity 사용해보기
  • 클릭시 Opacity 활성화해서 애니메이션처럼 투명해지게 만듦
  • 사용하기

import { TouchableOpacity } from "react-native";

// ...

<TouchableOpacity>
// ...
</TouchableOpacity>

• activeOpacity 투명도를 정할 수 있는 옵션

• TouchableHighlight 사용해보기
  • 옵션 없이 사용 시 아무동작도 하지 않음
  • 사용하기

import { TouchableHighlight } from "react-native";

// ...

<TouchableHighlight>
// ...
</TouchableHighlight>

• onPress 옵션
  • 눌렀을 때 동작하게 하는 함수
  • 사용하지 않으면 눌러도 반응이 없음!
• underlayColor 옵션
  • 눌렸을 때 버튼의 배경색을 바꿔주는 옵션
• 그렇게 많이 사용하진 않는다고 함

 

• TouchableWithoutFeedback 사용해보기
  • 위 2개 컴포넌트와 달리 UI로 표현은 되지 않고 onPress를 이용해서 이벤트를 관리 할 수 있음
  • 유저에게 보여주지 않을 때 사용
  • 사용하기

import { TouchableWithoutFeedback } from "react-native";

// ...

<TouchableWithoutFeedback>
// ...
</TouchableWithoutFeedback>

• Pressable 사용해보기
  • 더 많은 속성들을 제공해주는 컴포넌트로 섬세하게 작업할 수 있다.
• 사용하기

import { Pressable } from "react-native";

// ...

<Pressable>
// ...
</Pressable>

• delayLongPress : 얼마나 길게 누르면 반응할지
• disable : 위 컴포넌트엔 없음
• gitSlope : 바깥 어디까지 탭 누르는 것을 감지할지
• 여기서는 TouchableOpacity를 사용할 예정이다.

3.2강

• TextInput 사용하기

import { TextInput } from "react-native";

// ...

<TextInput />

1. onChangeText : 입력받은 Text를 받을 수 있음
2. keyboardType : 키보드 타입(핸드폰 키보드 타입)
3. returnKeyType : 완료 버튼의 타입을 정할 수 있음(정해짐)
4. returnKeyLabel : 완료 버튼의 이름을 정할 수 있음(only android 만 가능)
   • 내폰에선 안됨.
5. secureTextEntry : 비밀번호처럼 가려줌
6. multiline : 한 줄 이상 작성 가능
7. placeholderTextColor : placeholder의 색상 변경
8. autoCorrect : 자동완성 기능
9. autoCapitalize : 자동 대문자 기능
10. onSubmitEditing : submit 이벤트
11. 등등 다양한 옵션이 있음.

3.3강

• Object.assign 사용하기

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

1. 첫번 째 {} : 기존 객체를 변경하지 않게 함.
2. 두번 째 toDos : 기존 객체
3. 마지막 {[Date.now()]: { text, work: working },} : 추가 할 내용

3.4강

• 3.3강 내용 수정하기

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

• 페인팅하기

<ScrollView>
  {Object.keys(toDos).map((key) => (
    <View style={styles.toDo} key={key}>
      <Text style={styles.toDoText}>{toDos[key].text}</Text>
    </View>
  ))}
</ScrollView>

1. Object.keys로 키값으로 배열만들기
2. map으로 페인팅하기