홈 페이지 읽기 강좌 등 각종 정보를 제공했다.
그 중에서 주요 개념으로'state와 생명주기'라는 페이지에 시계를 만들었지만 보든 쓰든 잘 모르겠기 때문에 등장한 코드를 정리해 봤다.

완성형

메인 페이지에 적힌 다음 코드는 이런 느낌의 실시간 시간 표시 시계를 만들 수 있다

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')
);

알 수 없는 일

상술한 코드에서는 잘 모르겠지만, 나는 아래의 내용을 조사해 보았다

toLocaleTimeString

날짜 대상 방법 중 하나
※ 진행 일자와 시간의 획득 및 설정 대상
toLocalTimeString은 지역 정보에 따라 문자열로 시간 부분을 얻는 방법입니다.
마찬가지로 문자열 변환 방법을 어떻게 총결합합니까
형식
함의
toDateString
문자열을 사용하여 날짜 섹션 읽어들이기
toTimeString
문자열로 시간 섹션 가져오기
toLocaleDateString
지역 정보에 따라 문자열 형식으로 날짜 섹션 가져오기
toLocaleTimeString
지역 정보에 따라 문자열을 통해 시간 섹션 얻기
toString
문자열로 날짜 읽어들이기

componentDidMount 및 componentWillUnmount

라이프 사이클 방법 중 하나입니다.
라이프 사이클 방법
코드를 많이 썼는데 실행 순서도 있는 것 같아요.
생명주기 방법은 처리 과정의 특정 시간에 코드를 실행하는 방법을 가리킨다.
이 처리 과정과 방법의 관계는 ↓의 그림인 것 같다.

이 관계를 보면 지금까지 잘 알지 못했던contructor와render의 뜻을 이해할 수 있다

conponentDidMount

Component가 Mount에 의해 수행되는 방법은 다음과 같습니다.
・ Ajax를 사용하여 데이터 읽기 (초)
· DOM 처리(초)
/타이머 설정
일련의 목록
이번 코드는 타이머를 설치했다.
설정하면 componentWillUnmount () 로 해제하는 것을 잊지 마십시오.

componentWillUnmount

component는 Unmount 시 실행됩니다. 주요 용도는 다음과 같습니다.
타이머 해제
목록 목록 취소
비동기식 처리 중단

setInterval

일정 시간이 지난 후에 처리하는 방법입니다.
쓰기 방법 setInterval(関数,処理間隔)이곳의 처리 간격 단위는 밀리초이다.
이번 코드에서는 1초에 한 번 ()=>this.tick() 실행하는 것을 알 수 있다.
즉,

같은 시간에 끊임없이 업데이트되고 있습니다.

덕분에

clearInterval

setInterval()에 설정된 타이머 해제 방법입니다.
쓰기 방법 clearInterval(止めたいタイマーID)

참고 자료

React HP
JavaScript 시작 강좌
React Component 라이프 사이클
[JavaScript 입문] setInterval의 사용 방법 요약