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)
관련 포스팅
'언어 > ReactJS' 카테고리의 다른 글
| [React] 컴포넌트 반복 (0) | 2019.05.05 |
|---|---|
| [React] Ref (0) | 2019.05.02 |
| [React] 이벤트 핸들링 (2) | 2019.04.25 |
| [React] Props (1) | 2019.04.11 |
| [React ]개발 환경 (1) | 2019.04.08 |