[ React.js ] 현재 시각 시계 만들기 예제

 

 

 

 

자바스크립트 공부 초반에 만들어보았던 시계 만들기를 리액트로 진행해보겠습니다.

 

html 작성 내용은 이렇구요,

root라는 id를 가진 div 하나 생성.

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

 

해당 div에 출력할 Script(React.js) 작성 

<script type="text/babel">
        class App extends React.Component {
            constructor (props) {
                super(props)
                // state 속성에 time 객체 저장
                this.state = {
                    time : new Date()
                }
            }

            render () {
                return <h1>{this.state.time.toLocaleTimeString()}</h1>
            }

            // 컴포넌트가 화면에 출력될때 
            componentDidMount() {
                this.timerId = setInterval( () => {
                    this.setState({
                        time: new Date()
                    })
                    console.log('ticking')
                }, 1000)
            }

             // 컴포넌트가 화면에서 제거 될 때
            componentWillUnmount() {
                clearInterval(this.timerId)
                console.log('ticking end')
            }
        }
    
    
        const container = document.querySelector("#root")
        ReactDOM.render(<App />, container)
    </script>

 

해당되는 내용에서 컴포넌트(Component)가 언마운트(Unmount) 되는 경우는 없긴한데, 임시로 만들어놓았습니다.

 

다음에는 event와 연동하는 내용으로 작성할 수 있도록 하겠습니다.