[React] State

State

State? 

유동적인 데이터를 다룰 때 사용하는 요소

State 특징

1) props는 부모 컴포넌트가 설정하기때문에 읽기 전용으로만 사용 가능합니다.

2) 컴포넌트 내부에서 사용하기 위해서는 state를 사용해야 합니다.

---

State 사용

1. state 값 지정

state 값을 지정하는 방법은 두 가지가 있습니다.

1) constructor 함수를 사용

constructor함수는 생성자함수 라고도 불리며 생성자 안에 state를 지정합니다.

import React, { Component } from 'react';

class StateComponent extends Component {

constructor(props){

super(props);

this.state = {

number : 100

}

}

render() {

return (

<div>

숫자 : {this.state.number}

</div>

);

}

}

export default StateComponent;

2) transform-class-properties 문법

바벨의 transform-class-properties 문법으로 사용하는 방법입니다. constructor함수보다 간편합니다.

constructor와 동시에 사용하면 constructor가 우선적으로 적용 됩니다.

 

import React, { Component } from 'react';

class StateComponent extends Component {

state = {

name : "HyeUng"

,number : 100

}

render() {

return (

<div>

숫자 : {this.state.number}

이름 : {this.state.name}

</div>

);

}

}

export default StateComponent;

2. state 값 업데이트

업데이트는 setState함수로 가능합니다.

아래 형태로 업데이트를 할 수 있습니다.

this.setState({

  수정 할 필드 이름 : 값

  , .... : ...

});

import React, { Component } from 'react';

class StateComponent extends Component {

state = {

name : "HyeUng"

,number : 100

}

render() {

return (

<div>

숫자 : {this.state.number}

<br/><br/>

<button onClick={()=>{

this.setState({

number : this.state.number - 1

})

}

}>빼기</button>

</div>

);

}

}

export default StateComponent;

실행결과

5번 클릭한 결과입니다.

---

참고 : 리액트를 다루는 기술(저:VELOPERT)

관련 포스팅

[React] State

[React] Props