1. component를 control 할 수 있는 데이터 타입은 props, state 두 가지 이다. props를 사용하게 되면 component의 수명동안 정적인 형태를 지니게 되며, props는 부모에 의해 설정된다. 반면에, 동적인 데이터(변화할 데이터)들은 state를 사용해야한다.
2. 일반적으로, constructor에서 state 초기화를 선언하고나서 setState 문을 통하여 변화를 요구할 수 있다.
3. 만약, 지속적으로 깜빡거리는 텍스트를 만들고 싶을 경우를 예로 들어보자. blinking component 가 생성되자마자, text는 설정된다. 따라서 text그 자체로는 prop 의 성격을 지닌다.
setState가 불리어질때, BlinkApp 은 그것의 component에게 re-render 한다. setState를 timer안에서 calling함으로써
component는 매순간 re-render하게 된다.
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Blink extends Component {
constructor(props) {
super(props);
this.state = { isShowingText: true };
// Toggle the state every second
setInterval(() => (
this.setState(previousState => (
{ isShowingText: !previousState.isShowingText }
))
), 1000);
}
render() {
if (!this.state.isShowingText) {
return null;
}
return (
<Text>{this.props.text}</Text>
);
}
}
export default class BlinkApp extends Component {
render() {
return (
<View>
<Blink text='I love to blink' />
<Blink text='Yes blinking is so great' />
<Blink text='Why did they ever take this out of HTML' />
<Blink text='Look at me look at me look at me' />
</View>
);
}
}
// skip this line if using Create React Native App