리액트 작동원리

html -> index의 app -> app에서 호출한 컴포넌트 -> 리액트 돔 최신화

import React from "react";

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

    componentDidMount() { //3 clock 출력값이 DOM에 삽입되면 componentdidmount 호출 - 
        //그 안에서 Clock 컴포넌트는 매초 컴포넌트의 tick() 메서도 호출하기 위한 타이머 설정
       this.timerID = setInterval(
           () => this.tick(),
       1000
       );
    }
    componentWillUnmount() { //5 한번이라도 삭제된 적 있으면 리액트는 타이머 멈추기위해 
        //componentwillUnmount메소드 호출
        clearInterval(this.timerID);
    }

    tick() {//4. tick() 메소드를 브라우저에 요청 매초 tick 호출 - Clock 컴포넌트는 setState에
        //현재 시각을 포함한 객체를 호출하면서 UI업데이트 - setState호출 덕분에 리액트는 state 변경 인지 -> 화면에 표시될 내용
        // 알아내기위해 render 다시 호출 이때 render 안의 this.state.date가 달라지고 출력값은 업데이트된 시각 포함
        //리액트는 이에따라 DOM업데이트
        this.setState({
            date: new Date()
        });
    }

    render() { //2번 render 호출 - 화면에 표시될 내용 파악 - Clock 의 렌더링 출력값 일치를 위해 DOM업데이트
      return (
        <div>
          <h1>Hello, world!</h1>
          <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
        </div>
      );
    }
  }

//   ReactDOM.render( //1 clock의 constructor 호출 - 현재 시각이 포함된 객체로 this.state 초기화
//     <Clock />,
//     document.getElementById('root')
//   );

export default Clock;