[React] render , DOM

1. 초기 렌더링

어떤 UI 관련 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요하다 (render함수)

render함수란?

html 형식의 문자열을 받환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 개게를 반환한다.

컴포넌트 내부에 또 다른 컴포넌트들이 들어갈 수 도있고 이때 render 함수를 실행하면 내부에 있는 컴포넌트들도 렌더링한다.

최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업(markup)을 만들고, 우리가 정하는

실제 페이지의 DOM 요소안에 주입한다.

컴포넌트는 데이터를 업데이트했을 때 단순히 업데이트한 값을 수정하는 것이 아니라, 새로운 데이터를 가지고 render 함수를

또 다시 호출을 한다. 하지만 이때 결과를 곧바로 DOM에 반영하지 않고, 이전에 render 함수가 만들었던 컴포넌트 정보와

현재 render 함수가 만든 컴포넌트 정보를 비교한다

비교를 하여 둘의 차이를 알아내서 최소한의 연산으로 DOM트리를 업데이트를 하는 것이다.

DOM이란?

DOM은 Document Object Model의 약어이고 객체로 문서 구조를 표현하는 방법으로 XML , HTML로 작성을 합니다.

웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용하고 DOM은 트리형태라서 특정 노드를 찾거나 수정하거나

제거하거나 원하는 곳에 삽입할 수 있습니다.

문제점!

DOM에는 치명적인 한 가지 문제점이 있습니다. 동적 UI에 최적화되어 있지 않다는 것입니다. HTML은 자체적으로 정적입니다.

예를 들어 인스타그램이나 페이스북을 보면 스크롤을 내리면 데이터가 로딩이 됩니다. 각 데이터를 표현하는 요소(element)들이 있습니다.

하지만 요소가 몇 백 개 , 몇 천 개 단위로 있다면? 규모가 큰 웹 애플리케이션에서 DOM에 직접 접근하여 변화를 주다 보면 성능 이슈가

발생 할 수밖에 없는데요 DOM자체는 빠릅니다. 하지만 웹 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 읽고

레이아웃을 구성하고 , 페이지를 리페인트합니다. 이 과정의 시간이 오래 거립니다.

• 그렇기에 업데이트를 할 떄 DOM과 Virtual DOM과 비교하여 둘의 차이점만 업데이트하는 최소한의 처리 방식을 이용하는 것입니다.