다음 예제 코드는 time 속성으로 전달한 값을 CSS에 사용하는 상태비저장 아날로그 형식 컴포넌트다(ch04/clock-analog-digital/jsx/analog-display.jsx).⁵

 

예제 코드 4.7 상태비저장 아날로그 형식 컴포넌트

const AnalogDisplay = function AnalogDisplay(props) {
    let date = new Date(props.time) ---- 문자열로 된 날짜를 객체로 변환하여 사용할 수 있도록 한다.
    let dialStyle = {
        position: 'relative',
        top: 0,
        left: 0,
        width: 200,
        height: 200,
        borderRadius: 20000, ---- <div>를 원으로 만들기 위해서 너비에 비해 상대적으로 큰 borderRadius(일반적인 CSS의 경우 border-radius) 값을 적용한다.
        borderStyle: 'solid',
        borderColor: 'black'
    }
    let secondHandStyle = {
        position: 'relative',
        top: 100,
        left: 100,
        border: '1px solid red',
        width: '40%',
        height: 1,
        transform: 'rotate(' + ((date.getSeconds() / 60) * 360 - 90).toString() + 'deg)', ---- 각도를 계산하고 초침을 90도 뒤로 회전시켜서 수평 위치에서 시작하도록 한다.
        transformOrigin: '0% 0%', ---- transformOrigin을 사용하여 회전의 원점을 지정한다.
        backgroundColor: 'red'
    }
    let minuteHandStyle = {
        position: 'relative',
        top: 100,
        left: 100,
        border: '1px solid grey',
        width: '40%',
        height: 3,
        transform: 'rotate(' + ((date.getMinutes() / 60) * 360 - 90).toString() + 'deg)',
        transformOrigin: '0% 0%',
        backgroundColor: 'grey'
    }
    let hourHandStyle = {
        position: 'relative',
        top: 92,
        left: 106,
        border: '1px solid grey',
        width: '20%',
        height: 7,
        transform: 'rotate(' + ((date.getHours() / 12) * 360 - 90).toString() + 'deg)',
        transformOrigin: '0% 0%',
        backgroundColor: 'grey'
    }
    return <div>
        <div style={dialStyle}> ---- 시계 다이얼(원판)을 위한 스타일을 적용하여 컨테이너를 렌더링한다.
            <div style={secondHandStyle}/>
            <div style={minuteHandStyle}/>
            <div style={hourHandStyle}/>
        </div>
    </div>
}

---