State

  • State 는 props와 유사하지만, 비공개이며 컴포넌트에 의해 완전히 제어된다.
import React from 'react';
import ReactDOM from 'react-dom';

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date()
    };
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    )
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

setState()

  • this.state를 직접 수정할 수 있는 곳은 constructor다.
  • 그 외에는 setState()를 사용해야 한다.
  • setState()로 값이 변경되면 컴포넌트가 다시 렌더링된다.
  • 직접 state를 수정하면 컴포넌트가 다시 렌더링되지 않는다.
// BAD
this.state.comment = 'Hello';

// GOOD
this.setState({comment: 'Hello'});

비동기 State 업데이트

  • this.props, this.state 가 비동기적으로 업데이트될 수 있기 때문에, 다음 state를 계산할 때 해당 값에 의존하면 안됨.
// BAD: 실패할 수 있음
this.setState({
  counter: this.state.counter + this.props.increment,
})

// GOOD
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  }
});

State 업데이트는 병합된다

componentDidMount() {
fetchPosts().then(response => {
  this.setState({
  posts: response.posts
  });
});

fetchComments().then(response => {
  this.setState({
  comments: response.comments
  });
});
}

데이터는 아래로 흐른다

  • 컴포넌트는 자신의 state를 자식 컴포넌트에 props로 전달할 수 있다.
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>

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

function FormattedDate(props) {
  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}

참고자료