노드 버전
node --version
-> https://nodejs.org/ko/ 에서 최신 버전 다운
https://dev-pengun.tistory.com/entry/%EB%94%94%EB%8D%B0%EC%9D%B4-%EC%95%B1-%EB%94%B0%EB%9D%BC-%EB%A7%8C%EB%93%A4%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-React-Native-3-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0?category=888305
TouchableOpacity
- 이미지를 터치할 수 있게함
<TouchableOpacity>
<Image source={require('./icon/setting.png')}/>
</TouchableOpacity>
flexDirection
- 정렬방식 변경
const styles = StyleSheet.create({ container: { flex: 1, }, settingView: { flex: 1, backgroundColor: 'red', }, ddayView: { flex: 6, backgroundColor: 'green', flexDirection: 'row', }, chatView: { flex: 6, backgroundColor: 'blue', }, });
justifyContent
- 컨텐츠를 어떻게 배치할건지
const styles = StyleSheet.create({ container: { flex: 1, },- settingView: { flex: 1, backgroundColor: 'red', justifyContent: 'center', }, ddayView: { flex: 6, backgroundColor: 'green', justifyContent: 'center', }, chatView: { flex: 6, backgroundColor: 'blue', }, });
alignItems
alignSelf
alignSelf는 alignItem과 같은 효과를 가지지만, 자식 컴포넌트에게 작성하여, 그 자식컴포넌트만 따로 지정해줄 수 있는 옵션입니다.
borderRadius
- 모서리 둥글
backgroundColor: 'rgba(201,201,201,0.7)',
- 투명하게
onPress={()=>this.props.titleHandler(this.state.title,this.state.date)}>
onPress={this.props.modalHandler}/>
이벤트 핸들러나 콜백에 어떻게 매개변수를 전달할나요?
이벤트 핸들러에 화살표 함수를 사용하여 감싼 다음에 매개변수를 넘겨줄 수 있습니다.
<button onClick={() => this.handleClick(id)} />.bind를 호출한 것과 같습니다.
<button onClick={this.handleClick.bind(this, id)} />주의
Function.prototype.bind를 render 메서드에서 사용하면 컴포넌트가 렌더링할 때마다 새로운 함수를 생성하기 때문에 성능에 영향을 줄 수 있습니다.
따라서 해당 정보들을 저장할 필요가 있는데. AsyncStorage를 이용해서 기기내에 저장하겠습니다.
react-native-async-storage.github.io/async-storage/docs/install/
그리고 UNSAGE_componentWillMount()라는 함수를 작성해줍니다.
react native는 컴포넌트가 mount, update, unmount라는 크게 세가지의 상태가 있습니다.
componentWillMount라는 함수의 이름에서 볼 수 있듯이, 마운트가 되기전 호출되는 함수입니다.
마운트는 렌더링을 포함하는 단계인데 쉽게말해 렌더링되기 전에 호출되는 함수라고 생각하시면 됩니다.
async에 대해서 아직 잘 모르시는분은 developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function를 읽어보시면 좋을 것 같습니다.
asyncStorage작업이 실패할 수 있기 때문에 try, catch문으로 감싸게됩니다.
