1. Home
  2. 리액트 네이티브[React Native] 0.4x
  3. 기본[THE BASICS]
  4. 상태[State]

상태[State]

컴포넌트를 제어하는 두 가지 유형의 데이터가 있습니다: props와 state. props는 부모에 의해 설정되며 컴포넌트의 수명 내내 고정됩니다. 변경될 데이터의 경우 state를 사용해야 합니다.

일반적으로 생성자에서 상태를 초기화한 다음 변경하려는 경우 setState를 호출해야 합니다.

예를 들어, 항상 깜박이는 텍스트를 만들고 싶다고 합시다. 깜박이는 컴포넌트가 만들어지면 텍스트 자체가 한 번 설정되므로 텍스트 자체는 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
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = {showText: true};

    // Toggle the state every second
    setInterval(() => {
      this.setState({ showText: !this.state.showText });
    }, 1000);
  }

  render() {
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    );
  }
}

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>
    );
  }
}

AppRegistry.registerComponent('BlinkApp', () => BlinkApp);

실제 앱에서는 타이머를 사용하여 state를 설정하지 않을 것입니다. 새 데이터가 서버 또는 사용자 입력에서 들어오면 state를 설정할 수 있습니다. Redux와 같은 상태 컨테이너를 사용하여 데이터 흐름을 제어할 수도 있습니다. 이 경우 Redux를 사용하여 setState를 직접 호출하는 대신 state를 수정하십시오.

State는 React에서와 같은 방식으로 작동하므로 상태 처리에 대한 자세한 내용은 React.Component API를 참조하십시오.

이 시점에서 우리 예제의 대부분은 지금까지 지루한 기본 검정 텍스트를 사용하고 있다는 것에 짜증이 날 것입니다. 더 아름답게 만들려면 스타일에 대해 알아야 합니다.

Was this article helpful to you? Yes No

How can we help?