TouchableOpacity
View가 터치에 적절하게 반응하도록 한다!
클릭하면 포함된 View의 opacity가 감소하여 흐리게 표시되며,
opacity를 조절할 수 있다.
TouchableHighlight
View가 터치에 적절하게 반응하도록 한다!
클릭하면 포함된 View의 background가 표시된다.
TouchableWithoutFeedback
Press에 반응하는 모든 요소는 만졌을 때 시각적 피드백이 있어야 한다! 더 설정할 수 있는 파라미터값이 다양하다.
Pressable
Pressable은 정의된 자식에 대한 다양한 Press 상호 작용 단계를 감지할 수 있다.
<TextInput
value={text}
placeholder={working ? "Add a TO DO" : "Where do you want to go?"}
style={styles.input}
onChangeText={onChangeText}
onSubmitEditing={addTodo}
/>
const newTodos = Object.assign({}, todos, {
[Date.now()]: { text, work: working },
});
위 방식을 ES6로 그냥 구현하면
const newTodos = { ...todos, [Date.now()]: { text, work: working } };
이렇게도 구현이 가능하다. 이전 todos와 새롭게 추가되는 todos를 합쳐서 객체에 담아둔다.
{Object.keys(todos).map((key) => (
<View style={styles.todo} key={key}>
<Text style={styles.todoText}>{todos[key].text}</Text>
</View>
))}