State
2022-06-13
컴포넌트 안에서 관리되는 동적인 데이터
state가 변경되면 컴포넌트 리렌더링 발생
class Child extends React.Component {
// state 선언은 constructor 안에서 이루어짐
constructor(props){
super(props);
this.state = {
numData: 1,
arrData: [...],
objData: {...},
...
}
}
}
State 값은 리액트 함수 setState() 로 업데이트 함
// 잘못된 예시
// 리렌더링 X
this.state.numData = 2;
// 옳은 예시
// 리렌더링 O
this.setState({
numData: 2
})
setState는 비동기 함수라 state가 비동기적으로 업데이트 될 수 있음
setState의 값으로 함수를 주어도 됨
// setState에 함수를 줄 경우
this.setState((oldState, newProps)=>{
// 첫번째 인자 = 이전 state
// 두번째 인자 = 업데이트가 적용된 시점의 props
data: this.oldState.dataA + this.newProps.dataB
})