4.2.1 상태 객체에 접근하기

상태 객체는 컴포넌트의 멤버 변수로 this를 통해 접근할 수 있다. 예를 들어 this.state.name 같은 방식으로 접근한다. JSX에서 중괄호({})를 이용해 변수에 접근하고 출력했던 것을 기억할 것이다. 이와 유사하게 render()에서 this.state를 렌더링할 수 있다(다른 변수나 컴포넌트 클래스에 선언한 클래스 속성과 다르지 않다). 예를 들면 {this.state.inputFieldValue}처럼 작성할 수 있다. 이 문법은 속성에 접근하는 방법인 this.props.name과 비슷하다.

지금까지 배운 내용을 활용해서 그림 4-3과 같은 시계를 구현해보자. 독립적인 컴포넌트 클래스를 생성해서 누구나 쉽게 자신의 애플리케이션에 가져다 쓸 수 있도록 하는 것이 목표다. 시계는 현재 시간을 출력해야 한다.

▲ 그림 4-3 현재 시간을 디지털 형식으로 표시하고 매 초마다 갱신되는 시계 컴포넌트