Rendering Elements

Jin·2021년 7월 30일
0

키워드

  • 불변
  • 업데이트

리액트 컴포넌트는 엘리먼트를 반환한다. 컴포넌트를 조합하여 UI 를 구현하므로, 결국 리액트 엘리먼트를 DOM 에 그려주어야 함을 알 수 있다.

중요한 사실은 리액트 엘리먼트가 불변이라는 점이다. 만약, 상태가 바뀐다고 한다면, 리액트 엘리먼트들이 새롭게 평가되어 반환되게 되고, 반환된 것은 이전것과 동일하지 않은 엘리먼트가 된다.

리액트는 이렇게 DOM 을 업데이트 해주어야 할 경우, 두 엘리먼트를 비교해서 업데이트된 부분만을 찾아 DOM 에 새롭게 그려주는 방식을 취한다. 엘리먼트를 비교하는 일(트리 순회)은 비싸지만, 효율적인 알고리즘을 사용해 수행한다.

감상

돔 업데이트에 대해서 이해할 수 있는 챕터였다. 리액트 엘리먼트가 불변이라고 하는 사실을 안다면, 순회 알고리즘을 통해 바뀐 원소를 찾아서 돔을 업데이트 해야할 필요성이 자연스럽게 이해가 된다.

0개의 댓글