반면에 상태비저장 컴포넌트에 담은 유일한 로직은 애니메이션이지만, 애니메이션은 AnalogDisplay에만 관련되어 있다. 확실히 Clock 컴포넌트에서 아날로그 형식을 위한 애니메이션을 처리했다면 나쁜 설계가 되었을 것이다. 이제 Clock 컴포넌트에서 두 컴포넌트를 필요에 따라 모두 렌더링하거나 하나만 렌더링할 수도 있다. 상태비저장 컴포넌트를 여러 개의 상태저장 컴포넌트와 적절히 사용하면 좀 더 유연하고, 간단하며, 더 나은 설계를 할 수 있다.

보통 React를 다루는 개발자가 상태비저장 컴포넌트를 이야기하면 함수나 화살표 함수 문법으로 작성한 컴포넌트를 의미한다. 클래스를 사용해서 상태비저장 컴포넌트를 만들 수도 있지만, 이 방식은 추천하지 않는다. 다른 사람이나 혹은 컴포넌트를 직접 작성한 사람이라도 반 년쯤 뒤에 상태를 추가해버릴 수도 있기 때문이다. 이런 유혹을 없애고, 코드를 복잡하게 만드는 것을 미리 방지하자!

상태비저장 컴포넌트에 메서드를 둘 수 있는지 궁금할 것이다. 확실히 클래스를 사용할 때는 메서드를 사용할 수 있다. 그렇지만 앞서 설명한 것처럼, 대부분의 개발자가 함수를 사용한다. 함수도 자바스크립트 객체이므로 메서드를 추가할 수도 있지만, 그렇게 하면 코드가 아름답지 않다. 함수에서 this를 사용할 수 없기 때문이다(this 값이 컴포넌트가 아닌 window 객체를 가리킨다).

// 안티패턴: 이런 방식은 피하세요!
const DigitalDisplay = function(props) {
  return <div>{DigitalDisplay.locale(props.time)}</div>
}
DigitalDisplay.locale = (time)=>{
  return (new Date(time)).toLocaleString('EU')
}