리액트 카운터 Counter.tsx App.tsx (클래스 버전)

import * as React from 'react';
//https://react-etc.vlpt.us/06.typescript-basic.html
interface CounterProps {
    startNumber: number;
}
 
interface CounterState {
    number: number;
}
 
class Counter extends React.Component<CounterProps, CounterState> {
    public state = {
        number: 0,
    }
 
    constructor(props: CounterProps) {
        super(props);
        this.state.number = props.startNumber;
    }
 
    public handleClick = () => {
        this.setState({
            number: this.state.number + 1,
        });
    }
    public render() {
        return (
            <div>
                <h1>{this.state.number}</h1>
                <h1>{this.props.startNumber}</h1>
                <button onClick={this.handleClick}>Click Me</button>
            </div>
        )
    }
}
 
export default Counter;

 

App.tsx

 

import React from 'react';
import './App.css';
import Counter from './oop/Counter';
class App extends React.Component {
    public render() {
        return <Counter startNumber={0} />;
    }
}
 
export default App;