React - 주요개념 #5 State and Liftcycle

2020/11/27 - [React] - react - 주요개념#3 엘리먼트 렌더링(element rendering)

에서 잠깐 다룬 Clock 예시를 다시 살펴보겠습니당!

 

엘리먼트 렌더링(element rendering) 에서는 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);

 -> 여기서 보면 ReactDOM.render가 1초마다 setInterval(tick, 1000)을 통해 계속 호출되고 있다.

 

 

일반적으로 React에서 ReactDOM.render는 한번 쓰여진다고 말했었는데! 그렇게 하기 위해 이어서 공부해보자

 

 

 

우선 tick Component를 나누자

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 Component에서 타이머를 설정하고, 매초 UI를 업데이트하는것이  Clock Component 구현 세부사항이 되어야 하는데

 

위의 코드는 그게 아니다.

 

-> 한 번만 코드를 작성하고 Clockd 이 스스로 업데이트하도록 만들어야 한다.

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

 

이것을 구현하기 위해서 Clock Component에 state를 추가해야 한다

 

 -> state는 props와 유사하지만, 비공개이며 Component에 의해 완전히 제어된다!!