Component에는 props 말고도 state라는 데이터가 있다. state의 변수는 setState를 호출해서 변경 가능하다. 다음은 1초 마다 텍스트를 출력했다가 출력하지 않는 blink 형태로 화면을 구성하는 예제이다.
import React, { Component } from 'react'; import { Text, View } from 'react-native'; class Blink extends Component { componentDidMount(){ // Toggle the state every second setInterval(() => ( this.setState(previousState => ( { isShowingText: !previousState.isShowingText } )) ), 1000); } //state object state = { isShowingText: true }; 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> ); } }
state의 isShowingText 변수가 True인 경우 text를 출력해주고 false인 경우 null을 return하여 아무 것도 표시 되지 않도록 한다.
Pingback: React Native 개발 자료 모음 - Seed's Tale