React 주요 개념 State

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

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock data={new Date()}/>,
  document.getElementById('root')
);

위 코드를 props에서 state로 변경해 보겠습니다.

class Clock extends React.Component {
  constructor(props) {  // 초기 this.state를 지정하게 해주는 클래스
  	super(props);
    this.state = {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')
);

클래스 컴포넌트는 항상 props로 기본 constructor을 호출해야 합니다. 또한 하나의 클래스 컴포넌트 안에서 constructor를 2번 이상 선언해서는 안 되고 this.state를 지정할 수 있는 유일한 공간은 constructor입니다.

 

State Convention

setState()를 사용하기에 앞서 주의해야할 세 가지 컨벤션이 있습니다.

    1. 직접 state 수정하지 않는 대신에 setState() 사용하기

this.state.title = '하루끝';      // bad case

this.setState({title: '하루끝'}); // good case

    2. state 업데이트시 this.props와 this.state가 비동기적으로 업데이트될 수 있기 때문에 state를 계산할 때 해당 값에 의존하면 안 된다.

this.setState({  // bad case
    counter: this.state.counter + this.props.increment,
});

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

    2. setState()를 호출할 때 React는 제공한 객체를 현재 state로 병합합니다.

constructor(props) {
    super(props);
    this.state = {
    	posts: [],
        comment: []
    }
}

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

위 코드를 실행 시 결과로는 this.setState({comments)}는 this.state.posts에 영향을 주진 않지만 this.state.comments는 대체됩니다.