[ React.js ] 클릭 이벤트 구현 , 버튼 클릭 시 값 증가, 예제

안녕하세요 상훈입니다.

React.js 로 버튼을 클릭하면 값이 1씩 증가되는 기능을 구현해보려고합니다.

 

<div id="root"></div>

    <script type="text/babel">
        class App extends React.Component {
            constructor (props) {
                super(props)
                this.state = {
                    count: 0
                }
                this.countUp = this.countUp.bind(this)
            }
            render () {
                return (
                    <div>
                        <h1>클릭한 횟수 : {this.state.count}</h1>
                        <button type="button" onClick={this.countUp}>클릭</button>
                    </div>
                    )
            }
    
            countUp (event) {
                this.setState({
                    count: this.state.count + 1
                })
            }
            
        }
        const container = document.querySelector("#root")
        ReactDOM.render(<App />, container)

        
    </script>

 

root라는 이름을 가진 div하나 넣어주시고,

나머지는 전부 script로 한번에 html 내에 넣었습니다.