[React Native 공식 Doc 가이드 #4] State React Native

- 이 글은 React 공식 홈페이지 Docs https://facebook.github.io/react-native/ 에 기반하여 작성한 글입니다
- State
Component를 제어하는 2가지 형태의 data가 있다. 앞에서 배운 props와 이번 절에서 소개할 state이다. props는 부모로부터 정해지고 나면 컴포넌트의 생명주기동안에는 고정되어있는 data이다.
이렇게 고정되어있는 data가 아니라 변할 가능성이 있는 data를 다루고 싶다면 state를 사용해야 한다.
일반적으로 state는 생성자에서 초기화되고(constructor 함수에서 this.state에 Object를 할당한다.), 변경을 원하는 시점에 setState 함수를 호출함으로써 state를 변경한다.
예를 들어보자. 만약 화면에서 깜빡거리는 글자(blink text)를 만들기 원한다고 가정하자. 해당 글자는 component 생성시점에 결정된 후 변하지 않으므로 prop을 이용한다.
해당 글자가 현재 표시되는지 아닌지는 시간이 흐름에 따라서 변하는 사항이므로 state를 이용해야 한다.
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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
AppRegistry.registerComponent('AwesomeProject', () => BlinkApp);
위의 코드에서는 setInterval로 타이머를 사용했지만, 실제 앱에서 사용하는 경우는 거의 없다. 일반적으로는 서버로부터 새로운 data를 조회하거나 유저가 입력할 때 state를 세팅하는 경우가 많다.
또 data를 제어하기 위해서 Redux나 Mobx같은 state 컨테이너를 사용할 수도 있다. state 컨테이너를 사용하는 경우라면 setState를 직접 호출하는 경우보다는 state를 변경할 때 Redux나 Mobx를 사용하게 될 것이다.
setState가 호출될 때, BlinkApp 은 Component를 다시 그린다. 타이머에서 setState를 주기적으로 호출하기 때문에, component는 타이머 주기마다 다시 그릴 것이다.
state는 React 에서 동작할때와 똑같이 작동하기 때문에, state를 다루는법을 좀 더 자세히 알고 싶다면 https://reactjs.org/docs/react-component.html#setstate 를 참조하면 된다. 여태까지 작성한 예제가 기본적인 스타일의 텍스트로만 되어있기 때문에 지루할 것이다. 텍스트를 좀 더 꾸며보기 위해서 다음에는 Style을 배워보도록 하자.

덧글

댓글 입력 영역