react 기초 배우기 002 - state

State

• state는 component에서 렌더링되는 데이터를 담고 유지관리하는 자바스크립트 객체
• state의 값에 따라 화면에 보여지는 아웃풋이 달라짐
• state는 클래스 컴포넌트 안에서 사용가능함

• 함수컴포넌트를 정의했다면 state의 활용이 불가능함

  // state 사용 불가
  const App = () => {
    return (
        
    )
  }
  

• state는 render 함수 밖에서 정의됨

• this.state.sampleText의 this는 javascript문법으로 상위스코프를 가리킴

  class App extends Component {
    // state 선언
    state = {
      sampleText: 'Hello World',
    }
  
    render() {
      return (
        <View style={styles.background}>
          <!-- state.sampleText 활용 -->
          <Text>{this.state.sampleText}</Text>
        </View>
      )
    }
  }
  

• state는 화면을 렌더링할 때 쓰이는 데이터를 관리할 때 쓰이는 객체

• state의 값에 따라 상이한 화면이 출력됨

  class App extends Component {
    state = {
      sampleText: 'Hello World',
      // sampleBoolean 선언
      sampleBoolean: false
    }
    // inputText 선언
    inputText = () => {
      this.state.sampleBoolean ?
        <Text>sampleBoolean is true</Text>
      :
        <Text>sampleBoolean is false</Text>
    }
  
    render() {
      return (
        <View style={styles.background}>
          <!-- inputText 사용 -->
          {this.inputText()}
        </View>
      )
    }
  }
  

setState

• state는 직접 변경하면 안되는 특성이 있음

  class App extends Component {
    state = {
      sampleText: 'Hello World',
    }
  
    changeText = () => {
      // this.state.sampleText 는 Hi World가 되었지만 화면에 반영되지 않음
      this.state.sampleText = 'Hi World';
    }
  
    render() {
      return (
        <View style={styles.background}>
          <Text onPress={this.changeText}>
            {this.state.sampleText}
          </Text>
        </View>
      )
    }
  }
  

• state의 변경내용으로 화면을 렌더링하기 위해서는 setState가 필요함

  class App extends Component {
    state = {
      sampleText: 'Hello World',
      sampleBoolean: false
    }
  
    changeText = () => {
      if (!this.state.sampleBoolean) {
        // setState로 상태값을 바꾸고 화면을 상태에 맞게 렌더링
        this.setState({
          sampleText: 'Text Changed!!!',
          sampleBoolean: true
        })
      } else {
        this.setState({
          sampleText: 'Hello World!!!',
          sampleBoolean: false
        })
      }        
    }
  
    render() {
      return (
        <View style={styles.background}>
          <Text onPress={this.changeText}>
            {this.state.sampleText}
          </Text>
        </View>
      )
    }
  }
  

• state 업데이트는 비동기로 처리할 수 있음

• state는 성능향상을 위해 단일 업데이트를 지원함

  class App extends Component {
    state = {
      sampleNum: 1
    }
  
    onAdd = () => {
      // 에러 발생
      this.setState({
        sampleNum: sampleNum + 1
      })
    }
  
    render() {
      return (
        <View style={styles.background}>
          <Text onPress={this.onAdd}>
            {this.state.sampleNum}
          </Text>
        </View>
      )
    }
  }
  

• setState를 통해 값을 변경할 때는 현재 버전을 복사한 후에 업데이트을 진행하게 됨

  class App extends Component {
    state = {
      sampleNum: 1
    }
  
    onAdd = () => {
      // prevState를 사용
      this.setState(prevState => ({
        return {
          sampleNum: prevState.sampleNum + 1
        }
      });
    }
  
    render() {
      return (
        <View style={styles.background}>
          <Text onPress={this.onAdd}>
            {this.state.sampleNum}
          </Text>
        </View>
      )
    }
  }
  

참고

• https://www.inflearn.com/course/리액트-네이티브-기초