React State

 

State는 props와 유사하지만, 비공개이며 컴포넌트에 의해 완전히 제어된다.

Tip1
개발 초기 화면구조 잡기 등 정적 버전을 만들기 위해 state를 사용하지 말 것. state는 오직 상호작용을 위해, 즉 시간이 지남에 따라 데이터가 바뀌는 것에 사용해야 한다.

 

setState함수와 관계

class Clock extends React.Component {
	render({
    <div>
        <h1>Hello, world!+{this.cnt}</h1>
    </div>
     });
}

setState함수(React.Component를 상속받은 클래스의)가 호출되면 render가(React.Component를 상속받은 클래스의) 호출되도록 요청 된다.

그래서 state안에 변수를 만들고 setState함수로 변경되도록 하면 변경을 감지해서 갱신되는 것 처럼 동작한다.
( setState함수 호출에서 아무것도 변경 안해도 render가 호출된다 )

 

prevState

this.setState((prevState, props) => {
    return { count: prevState.count + 1 }
  });