(React) 시간 출력

React로 시간 출력

리액트를 이용해 현재 시간을 보여주는 페이지를 생성해보자.

클래스 생성, 구성

class Clock extends React.Component {
    render() {
        return (
            <div>
                <h1>Current Time</h1>
                <h2>It's {this.state.date.toLocaleTimeString()}</h2>
            </div>
        )
    }
}

Clock이란 이름의 리액트 컴포넌트 클래스를 생성.

render() 메서드를 생성해 표현할 내용을 구성한다.

시간표현은 상태객체를 이용해this.state.date.toLocaleTimeString() 로 작성한다.

상태 조정

Clock 클래스에 생성자를 추가해 상태를 초기화 한다.

class Clock extends React.Component {
	// 생성자 추가
    constructor(props) {
        super(props)
        this.state = {date: new Date()}
    }

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

위 생성자는 상태의 date를 새로운 Date객체로 초기화 시켜준다.

Clock 클래스를 렌더링 할 때마다 새로운 시간을 나타내게 해준다.

클래스 컴포넌트는 항상 props (속성)을 이용해 생성자를 불러와야 한다.

렌더링

Clock 클래스를 페이지에 렌더링한다.

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

최종 코드

class Clock extends React.Component {
    constructor(props) {
        super(props)
        this.state = {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')
)

이렇게 현재 시각을 알려주는 페이지를 생성할 수 있다.

하지만 지금의 페이지는 자동으로 변하는 시간을 갱신해 주지 않는다는 단점이 있다.

실시간으로 시간을 갱신하기 위해서는 라이프사이클을 이용해야한다.

다음에는 자동으로 갱신되는 시계를 생성해보자.