Clock 컴포넌트는 두 자식 엘리먼트에 time 속성으로 상태인 currentTime 값을 전달한다. 부모의 상태가 자식의 속성이 된다.

 

예제 코드 4.5 자식 엘리먼트에 상태 전달하기

...
    render() {
        console.log('Rendering...')
        return <div>
            <AnalogDisplay time={this.state.currentTime}/>
            <DigitalDisplay time={this.state.currentTime}/>
        </div>
    }

---

 

이제 DigitalDisplay를 생성하자. 간단하다. 다음과 같이 속성을 전달받은 후, 해당 속성인자인 props.time으로 시간을 출력하는 함수다(ch04/clock-analog-digital/jsx/digital-display.jsx).

 

예제 코드 4.6 상태비저장 디지털 형식 컴포넌트

const DigitalDisplay = function(props) {
    return <div>{props.time}</div>
}

---