AnalogDisplay도 상태비저장 컴포넌트를 구현한 함수다. 그렇지만 내부에 시침을 조작하기 위한 애니메이션이 포함되어 있다. 이 애니메이션은 time 속성에 의해 작동하며, 다른 상태에 의존하고 있지 않다. 시간을 문자열로 전달받은 후 Date 객체로 변환하여 시, 분, 초를 가져온 다음, 그 값을 각도로 변경한다. 예를 들어 다음 예제 코드는 초를 각도로 변환하는 방법이다.

let date = new Date('1/9/2007, 9:46:15 AM')
console.log((date.getSeconds()/60)*360 ) // 90

 

각도를 계산한 후에는 객체 리터럴로 작성된 CSS에 사용할 수 있다. React CSS의 차이점은 스타일 속성을 카멜 표기법으로 작성한다는 점이다. 반면에 CSS에서 원래 사용하는 대시 기호(-)를 사용하면 자바스크립트에서는 유효하지 않다. 앞에서 언급한 것처럼 스타일에 객체를 사용하는 것이 React가 이전 엘리먼트와 새로운 엘리먼트의 차이점을 더 빨리 결정하도록 해준다. React의 스타일과 CSS에 대해서는 3.4.3절에서 다뤘다.