React - 동적인 시계 컴포넌트 구현

React로 DOM변경하기

모던 자바스크립트 개발자를 위한 리액트 프로그래밍으로 공부중인데

책에는 React 프로젝트가 아닌, HTML상에서만 다루고 있다.

직접 js에 컴포넌트로 구현해보았다.

 

App.js

x
import React, { Component } from 'react';
import './App.css';
​
class Clockcmp extends Component {
​
    constructor(props){
        super(props)
        this.state = {d: new Date()}
    }
​
    componentDidMount() { // Clockcmp 컴포넌트가 불러올때마다 1초씩 this.Change()를 부른다 
        this.timeID = setInterval(
            () => this.Change(),
            1000
        )
    }
​
    componentWillUnmount(){ //종료되면 반복하는것도 클리어시키기
        clearInterval(this.timeID)
    }
​
​
    Change = () => {  //시계 구현
​
        this.setState({
            d : new Date(),
        })
    }
​
    render() {
        return(
            <div>
                {this.state.d.getHours()}:{this.state.d.getMinutes()}:          {this.state.d.getSeconds()}
            </div>)
    }
}
​
export default Clockcmp;
​

 

Clockcmp컴포넌트 생성자로 this.state.d가 new Date()를 가지게 된다.

 

컴포넌트가 마운트될때마다 componentDidMount 함수가 동작하며,

언마운트 되는 경우엔 componentWillUnmount 함수가 동작한다.

 

동적 바인딩을 위해서(비동기로 값이 바뀐다는 의미로 쓴건데 용어가 맞나 )

this.setState로 값을 변경하고 render로 출력한다.

캡쳐해서 안움직이지만, 동적으로 작동된다

 

더 속도내서 React Native랑 Electron 개발도 해야겠다