(React) 시간 출력(2)

React로 시간 출력(2)

이 포스팅은 리액트 공식 홈페이지(https://reactjs.org/) 의 내용을 바탕으로 작성하였습니다.

저번 포스팅에서 리액트를 이용해 시간을 표시하는 페이지를 생성했다.

다만 시간을 자동으로 갱신하지 못하는 단점이 있었다.

이번에는 라이프사이클 (Life Cycle)을 통해 그 점을 보완한 페이지를 생성해보자.

우선 컴포넌트 관련 메서드를 설명한다.

`componentDidMount()`

컴포넌트가 DOM에 렌더링 되었을때 실행된다.

`componentWillUnmount()`

컴포넌트가 제거될때 실행된다.

메서드 구성

우선 componentDidMount() 에 setInterval()을 사용하여 주기적으로 시간을 갱신하도록 한다.

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

1초에 한번씩 tick() 메서드를 실행하는 timerID 객체를 생성했다.

componentWillUnmount() 를 사용하여 컴포넌트가 제거될때 시간 갱신을 중지하도록 한다.

	componentWillUnmount() {
        clearInterval(this.timerID)
	}

Clock 클래스의 상태를 갱신하는 tick() 메서드를 구현한다.

	tick() {
        this.setState({
            date: new Date()
        })
	}

setState() 메서드로 date를 갱신.

최종 코드

class Clock extends React.Component {
    constructor(props) {
        super(props)
        this.state = {date: new Date()}
    }

    componentDidMount() {
        this.timerID = setInterval(
            () => this.tick(),
            1000
        )
    }
    
    componentWillUnmount() {
        clearInterval(this.timerID)
    }

    tick() {
        this.setState({
            date: new Date()
        })
    }
    
    render() {
        return (
            <div>
                <h1>Current Time</h1>
                <h2>It's {this.state.date.toLocaleTimeString()}</h2>
            </div>
        )
    }
}

ReactDOM.render(
    <Clock />,
    document.getElementById('content')
)

시계 작동 모습

reactclock

간단하게 라이프사이클을 이용해 자동으로 갱신되는 시계를 생성.