React - Binary 시계 구현

Binary-시계

import React, { Component } from 'react';
import './App.css';
​
class Clockcmp extends Component {
​
    constructor(props){
        super(props)
        this.state = {line: this.Change()}
    }
​
    componentDidMount(){
        this.timeID = setInterval(
            () => this.Change(),
            1000
        )
    }
​
    componentWillUnmount(){
        clearInterval(this.timeID)
    }
​
​
    Change = () => {
​
        const now = new Date();
        const hh = this.z2(now.getHours())
        const mm = this.z2(now.getMonth())
        const ss = this.z2(now.getSeconds())
​
        const binStr = hh + mm + ss
        const style0 = {color: 'black'}
        const style1 = {color: 'black'}
​
        const lines = []
        let bin8
        let bin
        for(let i =0; i<binStr.length; i++){
            const v = parseInt(binStr.substr(i, 1))
            bin = "0000" + v.toString(2)
            bin8 = bin.substr(bin.length - 4, 4)
​
            for(let j =0; j<bin8.length; j++){
                if (bin8.substr(j,1) === '0'){
                    lines.push(<span style={style0}>⚪️</span>)
                }
                else{
                    lines.push(<span style={style1}>⚫️</span>)
                }
            }
            lines.push(<br></br>)
        }
        this.setState({
            line : lines,
            binStr : binStr,
            bin8 : bin8,
            bin : bin
        })
    }
​
    z2 = (v) => {
            v = String("00" + v)
        return v.substr(v.length -2, 2)
    }
​
    render() {
        return(
            <div>
                binStr : {this.state.binStr}<br></br>
                bin8 : {this.state.bin8}<br></br>
                bin : {this.state.bin}<br></br>
                {this.state.line}
            </div>)
    }
}
​
export default Clockcmp;