04 Reredering

react에서는 값이 변경이 되는 부분만 rerendering이 된다.

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

setInterval(tick, 1000);

위와 같이 매 초마다 h2의 text 값이 변경되지만, 전체를 rerender 하는 것이 아닌 실제 값이 변경된 부분에만 변경이 일어난다.

diff 알고리즘에 대해서는

https://ko.reactjs.org/docs/reconciliation.html

에 자세하게 설명이 되어있다.

memo, useMemo, useCallback으로 React 성능 최적화하기 :: Code Playground

위의 글처럼 react의 성능향상을 위해선 Hook에 대해서 더 공부해야할 것 같다.