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

🔸 파일 생성하기

• 터미널에서 원하는 폴더로 접근한 뒤,
• 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

• 더 다양한 props 옵션이 있음
• 버튼 누르면 배경색이 바뀌도록 해줌
• underlayColor="#DDDDDD" => 배경색 설정
• 공식문서
  => https://reactnative.dev/docs/touchablehighlight
  

3. TouchableWithoutFeedback

• 화면의 가장 위에서 일어나는 탭 이벤트를 Listen
• 그런데 그래픽이나 UI 변경 등은 보여주지 않음
• 터치 애니메이션 보여주고 싶지 않다면 사용
• 공식문서
  => https://reactnative.dev/docs/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 버전과 같은 버전의 모듈을 설치해줌