매초마다 React 컴포넌트 업데이트

매초마다 React 컴포넌트 업데이트

---

나는 React를 가지고 놀았고 Date.now()화면에 렌더링되는 다음과 같은 시간 구성 요소를 가지고 있습니다.

import React, { Component } from 'react';

class TimeComponent extends Component {
  constructor(props){
    super(props);
    this.state = { time: Date.now() };
  }
  render(){
    return(
      <div> { this.state.time } </div>
    );
  }
  componentDidMount() {
    console.log("TimeComponent Mounted...")
  }
}

export default TimeComponent;

이 구성 요소를 매초마다 업데이트하여 React 관점에서 시간을 다시 그리는 가장 좋은 방법은 무엇입니까?

---

를 사용 setInterval하여 변경을 트리거해야하지만 구성 요소가 마운트 해제 될 때 타이머를 지워서 오류를 남기고 메모리 누수를 방지해야합니다.

componentDidMount() {
  this.interval = setInterval(() => this.setState({ time: Date.now() }), 1000);
}
componentWillUnmount() {
  clearInterval(this.interval);
}

---

다음은 React.js 웹 사이트의 예입니다.

  class Timer extends React.Component {
          constructor(props) {
            super(props);
            this.state = { seconds: 0 };
          }

          tick() {
            this.setState(prevState => ({
              seconds: prevState.seconds + 1
            }));
          }

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

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

          render() {
            return (
              <div>
                Seconds: {this.state.seconds}
              </div>
            );
          }
        }

 ReactDOM.render(<Timer />, mountNode);

---

구성 요소의 componentDidMount수명주기 메서드에서 상태를 업데이트하는 함수를 호출하는 간격을 설정할 수 있습니다.

 componentDidMount() {
      setInterval(() => this.setState({ time: Date.now()}), 1000)
 }

---

class ShowDateTime extends React.Component {
   constructor() {
      super();
      this.state = {
        curTime : null
      }
    }
    componentDidMount() {
      setInterval( () => {
        this.setState({
          curTime : new Date().toLocaleString()
        })
      },1000)
    }
   render() {
        return(
          <div>
            <h2>{this.state.curTime}</h2>
          </div>
        );
      }
    }

---

So you were on the right track. Inside your componentDidMount() you could have finished the job by implementing setInterval() to trigger the change, but remember the way to update a components state is via setState(), so inside your componentDidMount() you could have done this:

componentDidMount() {
  setInterval(() => {
   this.setState({time: Date.now()})    
  }, 1000)
}

Also, you use Date.now() which works, with the componentDidMount() implementation I offered above, but you will get a long set of nasty numbers updating that is not human readable, but it is technically the time updating every second in milliseconds since January 1, 1970, but we want to make this time readable to how we humans read time, so in addition to learning and implementing setInterval you want to learn about new Date() and toLocaleTimeString() and you would implement it like so:

class TimeComponent extends Component {
  state = { time: new Date().toLocaleTimeString() };
}

componentDidMount() {
  setInterval(() => {
   this.setState({ time: new Date().toLocaleTimeString() })    
  }, 1000)
}

Notice I also removed the constructor() function, you do not necessarily need it, my refactor is 100% equivalent to initializing site with the constructor() function.

참고URL : https://stackoverflow.com/questions/39426083/update-react-component-every-second