[React-Native] ToDo앱 만들기 - 기본 UI

Dorong·2023년 2월 10일
0

React-Native

목록 보기
4/6
post-thumbnail

🔸 파일 생성하기

  • 터미널에서 원하는 폴더로 접근한 뒤,
  • expo init toDoApp --npm
  • blank 옵션 선택
  • RN만의 css 속성 몇가지 있음
  • 그 중 하나가 paddingHorizontal, paddingVertical
  • 해당 방향으로 패딩 줌!!
  • 테마 관련 정보 별도의 파일로 정리하면 편함

🔸 Button

  • onPress 속성은 Touchable을 유저가 눌렀을 때 실행되는 이벤트
    • onPressIn : 손가락이 그 영역 안에 들어갈 때
    • onPressOut : 손가락이 그 영역에서 벗어날 때
    • onLongPress : 손가락이 그 영역에서 오래 머무를 때

1. TouchableOpacity

  • View와 비슷한데 이벤트를 리슨할 줄비가 된 view
  • opacity가 들어간 이유는 애니메이션을 제공하기 때문
  • 누른 요소를 약간 투명하게 만들어줌
  • 투명도 props로 설정 가능
  • 일반적으로 많이 사용
  • 공식문서
    => https://reactnative.dev/docs/touchableopacity

2. TouchableHighlight

3. TouchableWithoutFeedback

4. Pressable (new!!)

  • TouchableWithoutFeedback과 같지만 조금 다름
  • 기본적 onPress 속성 다 있고
  • LongPress 길이 설정 등 가능
  • disabled도 있음
  • hitSlope : 터치 감지 영역 설정
  • 조금씩 다르고 새로운 것들이 있고, 사이트가 추천하는 것으로 보임
  • 공식문서
    => https://reactnative.dev/docs/pressable

  • 버튼 클릭시 함수 => onPress() 사용
  • 예시로 state 변경을 통한 css 스타일링
    const [working, setWorking] = useState(true);
    const travel = () => setWorking(false);
    const work = () => setWorking(true);
    .
    .
    .
    <TouchableOpacity activeOpacity={0.5} onPress={work}>
        <Text style={{...styles.btnText, color : working ? 'white' : theme.grey}}>Work</Text>
    </TouchableOpacity>
  • 비슷한 요소에서 css 조금씩 다르게 주고싶으면 spread operator 활용하자!!

🔸 Text Input

  • html처럼 다양한 입력창 없이 딱 하나
  • 근데 props가 매우매우 많음
  • placeholder
    • html과 동일 기본값 넣어주기
  • placeholderTextColor
    • 기본값 색 변경
  • onFocus
    • focus는 화면을 터치하면 쓸 준비가 된 상태
  • onChangeText
    • 우리가 입력한 Text를 받을 수 있음
  • keyboardType
    • 글자 자판 or 숫자 자판 등
  • returnKeyType
    • return 모양을 바꿈
    • 엔터이거나 보내기 이거나
  • secureTextEntry
    • 패스워드 가리는 용도
  • multiline
    • 한 줄 이상 쓰는 경우
  • onChangeText
    • 텍스트 입력(변경)시 함수 실행
  • autoCapitalize
    • 문장, 단어 등의 단위로 자동으로 대문자 시작 설정
  • 공식문서
    => https://reactnative.dev/docs/textinput

🔸 ToDo 추가하기

  • TextInput에서
  • onSubmitEditing
    => 입력값 전송하기
  • state로 항목들 관리할 때, 배열보다는 오브젝트 사용 추천
    • 현재시간 값 등으로 id 지정할 수 있고,
    • 이 id를 통해 수정, 삭제 등을 유용하게 할 수 있음
    • Object.assign 활용하자
    • 오브젝트 합치는 역할
      const target = { a: 1, b: 2}
      const source = { c: 3, d: 4}
      const returnedTarget = Object.assign(target, source);
      // 출력
      { a: 1, b: 2, c: 3, d: 4 }
      { c: 3, d: 4 }
      { a: 1, b: 2, c: 3, d: 4 }
    • spread operator로 대체 가능
      ```
      const addToDo = () => {
        if(text === ""){
          return
        }
        const newToDos = {...toDos, [Date.now()] : {text : text, working : working}}
        setToDos(newToDos);
        setText("")
      }
      ```

🔸 항목 구분하기

  • 지금 할일을 저장할 때 working state를 work와 travel에 따라 true/false로 저장해줬음
  • 그러니 출력부에서 현재 working state와 비교해서 출력하면 카테고리별로 구분 가능
      <ScrollView>
        {
          Object.keys(toDos).map( (key) => {
            return (
              toDos[key].working === working ? (
                <View key={key} style={styles.toDo}>
                  <Text style={styles.toDoText}>{toDos[key].text}</Text>
                </View>
              ) : null
            )
          })
        }
      </ScrollView>

토막상식 - npm install vs. expo install

  • expo install은 기본적으로 npm install을 포함
  • 하지만 expo 사용하면 현재 사용중인 expo 버전과 같은 버전의 모듈을 설치해줌

profile
🥳믓진 개발자가 되겠어요🥳

0개의 댓글