[React] setInterval 메소드를 통한 상태(State) 갱신

 

 

브라우저의 타이머 함수인 SetInterval()을 사용해서 상태를 갱신 할 수있다. 예제를 보자.

 

 아래 코드에서 constructor 함수는 Clock Class의 생성자다. constructor 메소드를 먼저 살펴보면 super()를 통해서 부모 클래스의 생성자를 실행한다. 그 다음 Clock Class에서 구현한 launchClock()을 실행하는데 여기서 setInterval() 메소드를 사용한다. 첫번째 인자가 실행할 구문이고 , 두번째 인자가 interval time이다. 여기서는 1000밀리초로 설정했으므로 1초마다 console.log()와 this.setState()를 실행하게 된다. this.setState를 통해서 1초마다 state의 currentTime을 수정한다.

class Clock extends React.Component {
  constructor(props) { 
    super(props);
    this.launchClock();
    this.state = { currentTime: new Date().toLocaleString() };
  }
  launchClock() {
    setInterval(() => {
      console.log('Updating time...');
      this.setState({
        currentTime: new Date().toLocaleString()
      });
    }, 1000);
  }
  render() {
    console.log('Rendering Clock...');
    return React.createElement(
      'div',
      null,
      this.state.currentTime
    );
  }
}