react native 친해지자! - todo app 구현하기 1

lionloopy·2024년 12월 24일

리액트 네이티브

목록 보기
4/5
post-thumbnail

touchables

  • TouchableOpacity
    View가 터치에 적절하게 반응하도록 한다!
    클릭하면 포함된 View의 opacity가 감소하여 흐리게 표시되며,
    opacity를 조절할 수 있다.

  • TouchableHighlight
    View가 터치에 적절하게 반응하도록 한다!
    클릭하면 포함된 View의 background가 표시된다.

  • TouchableWithoutFeedback
    Press에 반응하는 모든 요소는 만졌을 때 시각적 피드백이 있어야 한다! 더 설정할 수 있는 파라미터값이 다양하다.

  • Pressable
    Pressable은 정의된 자식에 대한 다양한 Press 상호 작용 단계를 감지할 수 있다.

TextInput

      <TextInput
      	value={text}
        placeholder={working ? "Add a TO DO" : "Where do you want to go?"}
        style={styles.input}
        onChangeText={onChangeText}
        onSubmitEditing={addTodo}
      />
  • 리액트의 form, input과 달리 react native에서는 TextInput으로 사용자의 입력이 가능하다.
  • placeholder: placeholder를 지정할 수 있고, 위처럼 조건문도 사용이 가능하다.
  • returnKeyType: "send", "go" 등등 지정하는 것에 따라 키보드의 enter 키 이름이 변경된다.
  • onChangeText: 사용자의 입력값이 바뀔 때 마다 감지하는 함수
    이외에도 placeholder 색을 지정하거나, 비밀번호 입력 방식으로 하거나, 상황에 맞게(이메일 입력, 번호만 입력 등) 키보드를 손쉽게 커스텀할 수 있다.
  • onSubmitEditing: form처럼 제출할 수 있다.

Object.assign

    const newTodos = Object.assign({}, todos, {
      [Date.now()]: { text, work: working },
    });
  • Object.assign으로 3가지를 결합할 수 있다.
    위 코드의 경우 첫번째는 빈 객체, todos를 합치고, 새롭게 추가되는 todos를 합친다.

위 방식을 ES6로 그냥 구현하면

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

이렇게도 구현이 가능하다. 이전 todos와 새롭게 추가되는 todos를 합쳐서 객체에 담아둔다.

Object.keys

        {Object.keys(todos).map((key) => (
          <View style={styles.todo} key={key}>
            <Text style={styles.todoText}>{todos[key].text}</Text>
          </View>
        ))}
  • 객체를 map으로 구현해야할 때, 배열이 아니므로
    key를 가지고 전체 내용을 가져올 수 있게끔 한다.
profile
기록은 담백하게, 성장은 빠르게! 🐘

0개의 댓글