이전 섹션에서 다룬 째깍거리는 시계 예시를 다시 생각해보자. 엘리먼트 렌더링에서는 UI를 업데이트 하는 한 가지 방법만 배웠고, 렌더링 된 출력값을 변경하기 위해 ReactDOM.render()를 호출했다.

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ***ReactDOM.render(
    element,
    document.getElementById('root')
  );***
}

setInterval(tick, 1000);

CodePen에서 확인

이 섹션에서는 Clock 컴포넌트를 완전히 재사용하고 캡슐화 하는 방법은 배운다. 이 컴포넌트는 스스로 타이머를 설정할 것이고 매초 스스로 업데이트 한다.

시계가 생긴 것에 따라 캡슐화하는 것으로 시작할 수 있다.

function Clock(props) {
  return (
    ***<div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>***
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

그러나 여기에는 중요한 요건이 누락되어 있다. Clock이 타이머를 설정하고 매초 UI를 업데이트하는 것이 Clock의 구현 세부사항이 되어야 한다.

이상적으로 한 번만 코드를 작성하고 Clock이 스스로 업데이트하도록 만들어야 한다.

ReactDOM.render(
  ***<Clock />,***
  document.getElementById('root')
);

이것을 구현하기 위해서 Clock 컴포넌트에 ***"state"***를 추가해야 한다.

State는 props와 유사하지만, 비공개이며 컴포넌트에 의해 완전히 제어된다.

함수에서 클래스로 변환하기

다섯 단계로 Clock과 같은 함수 컴포넌트를 클래스로 변환할 수 있다.

1. React.Component를 확장하는 동일한 이름의 ES6 class를 생성한다.
2. render()라고 불리는 빈 메서드를 추가한다.