React Counter 초당1씩 증가 예제

 

setInterval을 통해 render 갱신

const root = ReactDOM.createRoot(document.getElementById('root'));

function Clock(props) {
  return (
    <div>
      <h1>counter: {props.val1}.</h1>
    </div>
  );
}

c1 = 0;
function tick() {
  c1++;
  root.render(<Clock val1={c1} />);
}

setInterval(tick, 1000);

 

실행화면, 초당 1씩 증가한다.

 

Typescript Prj

import React from 'react';

class Cnt1 extends React.Component {
    timerid: any;
    state = { cnt: 0 };

    constructor(props: any) {
        super(props);
    }

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

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

    tick() {
        this.setState({
            cnt: this.state.cnt + 1
        });
    }

    render(): React.ReactNode {
        return (
            <div>
                <h1>Counter: {String(this.state.cnt)}</h1>
            </div>
        );
    };
}

export default Cnt1;

 

암호: infos

typescript_excounter.7z

0.02MB