리액트 state

state를 활용하려면 ES6 방식으로 클래스를 정의해야 한다.

 

class Clock extends React.Component {

    constructor(props) {  // 생성자 규칙

        super(props);

        this.state = { date: new Date() }; // constructor 안에서만 이렇게 정의할 수 있다.

    }

    render() {

        return (

            <div>

                { this.state.date.toLocaleTimeString() } // this.state를 사용한다.

            </div>

        );

    }

}

 

ReactDOM.render(<Clock />, document.getElementById('root'));

 

state를 변경하려면 setState() 메소드를 써야 한다.

위의 경우 this.setState({ date: new Date() });를 써서 바꿀 수 있다.

setState()가 호출되면 render() 메소드가 호출된다.

시간에 따라 setState()가 호출 되게 하려면

Lifecylce에 따라 호출되는 메소드에 넣어주면 된다.

 

 

 

1. State의 업데이트는 비동기적일 수도 있다

 

만약 setState()로 새로운 객체를 state에 넣을 때

이전 state의 값을 참조하려면 인자에 객체 대신

객체를 반환하는 함수를 넣어야 한다.

 

this.setState((state, props) => ({

    counter: state.counter + props.increment

}));

 

첫 번째 인자에는 state가 들어오고 두 번째 인자에는 props가 들어와

이전 state를 활용할 수 있고 변경된 props를 가져올 수 있다.

 

 

 

2. State의 업데이트는 개별적으로 이뤄진다

 

setState()를 이용하면 state의 객체를 갈아 엎는 게 아니라

setState에 담긴 속성만 달라진다.

 

this.state = {
    posts: [],

    comments: []
}

 

위에서 this.setState({ comments: ['hi'] });를 한다고 해도

comments의 값만 바꾸지 posts는 그대로 남아 있다.

 

 

 

3. Data는 아래로만 흐른다

 

부모의 render()에 다음을 넣으면

<FormattedDate date={this.state.date} />

 

FormattedDate의 props.date에 부모의 this.state.date를 넣을 수 있다.

그러나 반대로는 할 수 없다.

 

 

 

참고:

State and Lifecycle

https://reactjs.org/docs/state-and-lifecycle.html