노마드코더 리액트 네이티브 입문 - 4

Todo 와 여행 기록 앱 만들기

 

1. theme을 만들어서 컬러를 미리 저장해두기

관리를 위해서 utils 안에 만들어둠

export const theme = {
  bg : 'black',
  gray : '#3a3d40',
}

그리고 스타일부분에 하드코딩 대신 적용시켜주기

const styles = StyleSheet.create({
  container : {
    flex: 1,
    backgroundColor: theme.bg,
    paddingHorizontal: 20,
  },  
  header : {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 70,
  },
  btnText : {
    color : theme.gray,
    fontSize : 38,
    fontWeight: 600,
  },
});

 

 

2. 버튼

버튼을 클릭하거나 누를 때 사용될 3가지 컴포넌트

1. TouchableOpacity 
   • View 와 비슷한데, 누르는 이벤트를 listen할 준비된 View 라고 함
   • opacity는 애니메이션 효과가 있어서 ----> 누르면 약간 투명해짐!
   • 클릭했을 때 투명도는 activeOpacity 속성으로 직접 지정이 가능
2. TouchableHighlight
   • 눌렀을 때 실행되는 이벤트가 있을 때 사용해줌 underlayColor 속성으로 눌리는 부분의 배경색을 지정해줄 수 있음.
   • 다만 onPress 관련 이벤트 핸들러를 사용해줘야 반응! (onPressIn 과 onPressOut 으로 세분화가능) -> Press 이벤트는 손가락이 올라갔다 떼어지는 이벤트를 의미함
   • https://reactnative.dev/docs/next/touchablehighlight

<View style={styles.header}>
    <TouchableOpacity activeOpacity={0.5}>
      <Text style={styles.btnText}>Work</Text>
    </TouchableOpacity>
    <TouchableHighlight
      underlayColor="red"
      onPress={() => alert('Clicked!')}>
      <Text style={styles.btnText}>Travel</Text>
    </TouchableHighlight>
</View>

3. TouchableWithoutFeedback

• 클릭했을 때 효과가 없게(UI 변화 없이) 만들고자 할 때 사용
• https://reactnative.dev/docs/next/touchablewithoutfeedback

+ Pressable

• TouchableWithoutFeedback 과 동일한 기능 수행
• 위의 3가지 버튼 컴포넌트의 확장성 있고 미래에도 사용 가능한 버튼을 위해서 사용하길 권장
• onPress 이벤트 핸들러를 포함한 Touchable에는 없는 다양한 속성(disable, delayLongPress...)을 설정 가능
• 특히 hitSlope 속성의 경우, Sets additional distance outside of element in which a press can be detected - 즉 요소 바깥의 누르는 범위 감지를 지정해줄 수 있는 것 (UX 부분에서 중요할 듯)
• https://reactnative.dev/docs/next/pressable

 

 

3. 버튼을 누르면 변하는 state

  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 ? '#fff' : theme.gray }}>Work</Text>
</TouchableOpacity>
<TouchableOpacity 
  activeOpacity={0.5}
  onPress={travel}>
  <Text style={{...styles.btnText, color: working ? theme.gray : '#fff' }}>Travel</Text>
</TouchableOpacity>

버튼이 눌렸을 때 눌린 글자가 하얀색이 되게끔 처리

 

4. TextInput

textarea, input 같은 것이 없다.

https://reactnative.dev/docs/next/textinput

기존에 웹에서 사용하던 placeholder, value 등은 있으며,

추가로 keyboardType 으로 핸드폰 자판의 종류를 정해줄 수 있다. - 숫자패드(numeric), 이메일패드(email-address) 등등

 

onChange과 onChangeText, onFocus 등도 있음

입력된 값에 관한 이벤트핸들러는 onChangeText 를 사용하는데,

이벤트 객체(e)를 사용하지 않고 매개변수로 입력해준 text를 직접 받아올 수 있다. (웹에선 onChange 이벤트 핸들러를 사용하여 이벤트객체 e를 통하여  e.target.value 형식으로 접근해줬음)

  const onChangeText = (payload) => {
    setText(payload);
  }

 

returnKeyType과 returnKeyLabel(안드로이드만) 은 키패드의 return 부분을 꾸밀 수 있는 기능인데

화살표 모양 저 부분을 returnKey 라고 부른다

returnKeyType='send' 로하면 저렇게 변경 가능함.

안드로이드의 returnKeyLabel 속성은 안의 텍스트도 원하는대로 커스텀이 가능하다고 함

 

secureTextEntry 속성은 비밀번호를 입력할 때 보이지 않게 처리해주는 속성

 

multiline 은 여러 줄의 텍스트를 칠 수 있도록 해주는 속성, 기본값은 한줄로 계속 쓰여지는 것임

 

autoCorrect 속성은 키보드에 있는 자동수정? 기능이다. 기본값은 켜져 있어서 false 해줄 수 있음

 

autoCapitalize 속성은 문자를 대문자로 해주는 여부에 대한건데

characters 는 모든 문자를 대문자로,

words 는 첫글자만 대문자로(띄어쓰기 후 대문자로)

sentences 는 문장의 가장 첫번째 글자만 대문자로(띄어쓰기와 무관) 기본값임

 

 

5. 키보드의 return key 를 누르면

submit 이 되어, onSubmitEditing 이벤트가 발생된다.

onsubmitEditing 이벤트에 아래 함수를 넣어줘서 추가해준다.

  const addTodo = () => {
    if (text === '') return;

    const newTodos = Object.assign({}, todos,
      {
        [Date.now()] : {
          text,
          work:working,
        }
      });
    setTodos(newTodos);
    setText('');
  }

다만 아직은 핸드폰에 저장되지 않기에 리프레시 되면 state 값이 사라짐

전개 연산자를 사용해도 되는데 Object.assign() 을 사용하심

나는 전개연산자가 더 짧고 깔끔한 듯