[REACT] STATE

 

state : 컴포넌트 내부에서 읽고, 업데이트 가능

- 언제나 기본 값을 미리 설정해야 사용 가능 -> 초기화

- 객체 형식으로 생성 및 갱신

- 값 갱신 가능 -> setState( ) 함수 사용

 

constructor( ) : state 초기값을 내부에서 설정할 떄 사용

- MyComponent.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component {
    constructor(props){
        super(props);
        this.state = {
            number : 0 //state에 number값을 0으로 설정
        }
    }

    render() {
        return (
            <div>
                <p>숫자 : {this.state.number}</p>
        )
    }
}

export default MyComponent;

#super : 따로 constructor 메소드를 만들어 주지 않으면 Component 클래스의 생성자 메소드를 사용하게 되는데,

           직접 constructor 메소드를 작성하여 생성자 메소드에서 추가 작업을 하려면, 

           메소드 내부에서 부모 클래스인 component의 constructor 메소드를 먼저 호출해야 함

           이때 사용하는 키워드!

 

 

setState( ) : state값을 업데이트 할 때 사용

- 비동기 함수

- 다음 render( )가 사용되기 전까지는 적용이 됨

- 제어문을 걸어서는 안됨 -> 함수가 언제 끝날 지 모르기 때문

 

- MyComponent.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component {
    constructor(props){
        super(props);
        this.state = {
            number : 0 // state에 number값을 0으로 설정
        }
    }
    
    // 버튼을 누를 때 마다 숫자가 증가
    f1 = () => {
      this.setState({
        number: this.state.number + 1
      });
    }

    render() {
        return (
            <div>
                <p>숫자 : {this.state.number}</p>
                <button onClick={this.f1}}> 더하기 </button>
            </div>
        )
    }
}

export default MyComponent;

 

- state를 constructor에서 꺼내서 사용 가능

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component {
    // constructor(props){
    //     super(props);
    //     this.state = {
    //         number : 0 //state에 number값을 0으로 설정
    //     }
    // }

    state = {
        number: 0
    }

    f1 = () => {
      this.setState({
        number: this.state.number + 1
      });
    }

    render() {
        return (
            <div>
                <p>숫자 : {this.state.number}</p>
                <button onClick={this.f1}}> 더하기 </button>
            </div>
        )
    }
}

export default MyComponent;

 

---

 

Q. 그럼 그냥 일반 필드 변수로 선언해서 갱신하면 안되나?

A. 둘 다 갱신이 되지만, setState( ) 함수는 render( ) { } 를 호출한다

    즉, 화면에서 바로 바뀐 값을 볼 수 있다