1일 1개발공부˙Day 6

데이터 분석 하다가 갑자기 RN을 하는 이유는
1. 공부하던 데이터 분석 코드에서 'NoneType' object has no attribute 'find'
에러가 나는데 해결 방법을 못 찾겠다..
혹시 아시는 분 계시면 알려주세요ㅠㅠㅠ
2. 현재 졸업 논문으로 RN(Expo)로 어플을 만들고 있다
공부가 더 필요하기도 하고 그동안 공부했던 것도 정리할겸
오늘은 RN 공부!
(당장 필요한 부분만 골라서 정리했습니다)

이벤트

01. Press 이벤트
- 사용자가 특정 DOM을 클릭했을 때 호출되는 onClick 이벤트와 비슷
- 버튼을 만들 때 사용하는 TouchableOpacity 컴포넌트에서 설정할 수 있는 이벤트 종류
ⓐonPressIn: 터치가 시작될 때 항상 호출
ⓑonPressOut: 터치가 해제될 때 항상 호출
ⓒonPress: 터치가 해제될 때 onPressOut 이후 호출
ⓓonLongPress: 터치가 일정 시간 이상 지속되면 호출

import React from 'react';
import {TouchableOpacity, Text} from 'react-native';

const EventButton = () => {
const _onPressIn = () => console.log('Press In\n');
const _onPressOut = () => console.log('Press In\n');
const _onPress = () => console.log('Press In\n');
const _onLongPressIn = () => console.log('Press In\n');
...
export default EventButton;

02. change 이벤트
- 변화를 감지함
- TextInput 컴포넌트에 많이 사용됨

import React, {useState} from 'react';
import {View, Text, TextInpt} from 'react-native';

const EventInput = () => {
const[text, setText] = useState('');
const _onChange = event => setText(event.nativeEvent.text);
return(
<View>
<Text style={{margin:10}}> text:{text}</Text>
<TextInput
style = {{borderWidth: 1, padding: 0}}
placeholder="Enter a text"
onChange={_onChange}
/>
</View>
);
};

export default EventInput;

(시간이 없어서 들여쓰기는 일일히 하지 못했습니다ㅠㅠ)

여기서 onChange 대신 onChangeText를 사용하면
컴포넌트의 텍스트가 변경되었을 때 변경된 텍스트의 문자열만 인수로 전달

스타일링

*head / contents / footer

export const Header = () => {
  return (
    <View style={[styles.container, styles.header]}>
      <Text style={styles.text}>Header</Text>
    </View>
  );
};

export const Contents = () => {
  return (
    <View style={[styles.container, styles.contents]}>
      <Text style={styles.text}>Contents</Text>
    </View>
  );
};

export const Footer = () => {
  return (
    <View style={[styles.container, styles.footer]}>
      <Text style={styles.text}>Footer</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    height: 80,
  },
  header: {
    backgroundColor: '#f1c40f',
  },
  contents: {
    flex: 1,
    backgroundColor: '#1abc9c',
    height: 640,
  },
  footer: {
    backgroundColor: '#3498db',
  },
  text: {
    fontSize: 26,
  },
});

flex를 사용하여 비율로 설정할 수도 있다

---

https://blog.expo.dev/5-easy-to-use-react-native-calendar-libraries-e830a97d5bf7

5 Easy-to-Use React Native Calendar Libraries

를 참고하여 캘린더도 만들었는데
아직 가야할 길이 머네요...

마감알바와 졸업 논문을 하고 있는 저에게
너무 빡빡한 챌린지라
포스팅 내용 퀄리티가 조금 떨어지지만
앞으로 더 열심히 하겠다는 각오로 오늘 공부는 마무리하겠습니다!