[React-Native] state 초기화와 갱신

교재 <리액트 인 액션> 참고

 

🎯 State

: 컴포넌트가 다루는 값들의 집합체, key-value의 형태로 저장된다.

 

초기화

 컴포넌트에 상태를 저장하는 두가지 방법이 있는데, 서로 차이는 없다. 자신이 편한대로 일관성 있게 사용하면 된다.

1. 속성 초기화

export default class MyComponenet extends Component {
  state = {
    name: 'charming-l',
    age: 22,
    feeling: 'happy',
  };
  render() {
    return (
      <View>
        <Text> {this.state.name} </Text>
        <Text> {this.state.age} </Text>
        <Text> {this.state.feeling} </Text>
      </View>
    );
  }
}

 

2. 생성자 이용

render의 내용은 동일하며 1.의 코드중 state를 정의한 부분 대신 아래의 코드를 작성할 수도 있다.

  constructor() {
    super();
    this.state = {
      name: 'charming-l',
      age: 22,
      feeling: 'happy',
    };

 

---

❗ 다음과 같이 또한 문자, 숫자, boolean, 배열, 객체 모두 지정 가능하다.

  state = {
    name: 'charming-l',
    isMale: false,
    age: 22,
    color: ['orange', 'blue'],
    education: {
      elem: 6,
      mid: 3,
      hight: 3,
      univ: 2,
    },
  };

 

 

갱신

state는 반드시 this.setState의 호출을 통해서만 갱신되어야한다. 

setState가 호출될때마다 컴포넌트와 그 자식 컴포넌트들이 다시 렌더링된다. 초보들이 많이 하는 실수 중 하나가 state의 값을 단순히 = 연산자를 사용하여 변경하는 경우인데, 이 경우 state의 값은 바뀌지만 재렌더링되지 않아 우리에게 변경된 값이 보이지 않는다.

새로운 key-value로 이루어진 객체를 전달하면 기존의 state를 유지하되, 새로운 내용이 추가되고, state에 저장되어있는 키 값을 이용해 내용 변경이 가능하다. 대게 this.setState가 호출되는 메서드는 render 메서드 보다 먼저 정의한다. (메서드 정의 순서는 실제 동작에 영향 X)

 

나이를 클릭할 때마다 나이가 1씩 증가하도록 코드를 추가해보았다.

❓ onPress란? 태핑tapping이 가능한 컴포넌트에서 호출 가능한 터치 핸들러

❗ 권장하지는 않지만 알아두면 좋은 강제 렌더링 메서드 this.forceUpdate()가 있다.

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

export default class MyComponenet extends Component {
  state = {
    name: 'charming-l',
    age: 22,
    feeling: 'happy',
  };

  updateAge() {
    this.setState({
      age: this.state.age + 1,
    });
  }
  render() {
    return (
      <View>
        <Text> {this.state.name} </Text>
        <Text onPress={() => this.updateAge()}> {this.state.age} </Text>
        <Text> {this.state.feeling} </Text>
      </View>
    );
  }
}

위 코드의 결과 화면. 스타일시트는 별도로 적용하였다.