반응 네이티브의 상태는 무엇입니까?

State는 데이터의 출처입니다. 우리는 항상 상태를 가능한 한 단순하게 만들고 상태 저장 구성 요소의 수를 최소화하려고 노력해야 합니다. 예를 들어 상태의 데이터가 필요한 구성 요소가 10개 있는 경우 모든 구성 요소의 상태를 유지할 컨테이너 구성 요소 하나를 만들어야 합니다.

예시 1

사용자가 버튼을 누르면 버튼 제목이 ON/OFF로 변경됩니다.

상태는 아래와 같이 생성자 내부에서 초기화됩니다 -

constructor(props) {
   super(props);
   this.state = { isToggle: true };
}

isToggle은 상태에 지정된 부울 값입니다. 버튼의 제목은 isToggle 속성에 따라 결정됩니다. 값이 true이면 버튼 제목이 ON이고 그렇지 않으면 OFF입니다.

버튼을 누르면 아래와 같이 isToggle 값을 업데이트하는 setState를 호출하는 onpress 메서드가 호출됩니다. -

onPress={() => {
   this.setState({ isToggle: !this.state.isToggle });
}}

사용자가 버튼을 클릭하면 onPress 이벤트가 호출되고 setState가 isToggle 속성의 상태를 변경합니다.

App.js

import React, { Component } from "react";
import { Text, View, Button, Alert } from 'react-native';

class App extends Component {

   constructor(props) {
      super(props);
      this.state = { isToggle: true };
   }

   render(props) {
      return (
         <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
            <Button
               onPress={() => {
                  this.setState({ isToggle: !this.state.isToggle });
               }}
               title={
                  this.state.isToggle ? 'ON' : "OFF"
               }
               color="green"
            />
         </View>
      );
   }
}
export default App;

출력

사용자가 버튼을 누르면 버튼이 토글됩니다.

예시 2

사용자가 텍스트를 클릭할 때 텍스트 변경

아래 예에서 상태는 다음과 같이 생성자 내부에 표시됩니다. -

constructor(props) {
   super(props);
   this.state = { myState: 'Welcome to Tutorialspoint' };
}

상태 myState는 다음과 같이 Text 구성 요소 내부에 표시됩니다. -

<Text onPress={this.changeState} style={{color:'red', fontSize:25}}>{this.state.myState} </Text>

사용자가 텍스트를 터치하거나 누를 때 onPress 이벤트가 발생하고 아래와 같이 myState 상태를 업데이트하여 텍스트를 변경하는 this.changeState 메서드를 호출합니다. -

changeState = () => this.setState({myState: 'Hello World'})

import React, { Component } from "react";
import { Text, View, Button, Alert } from 'react-native';

class App extends Component {

   constructor(props) {
      super(props);
      this.state = { myState: 'Welcome to Tutorialspoint' };
   }
   changeState = () => this.setState({myState: 'Hello World'})
   render(props) {
      return (
         <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
            <View>
               <Text onPress={this.changeState} style={{color:'red', fontSize:25}}>                         {this.state.myState} </Text>
            </View>
         </View>
      );
   }
}
export default App;

출력