초기 렌더링과 Virtual DOM

⚡초기렌더링이란?

 

어떤 UI 관련 프레임워크, 라이브러리를 사용하든 맨 처음 화면이 어떻게 보일지를

정해줄 필요성이 있습니다. 이를

초기렌더링 이라고 합니다.

 

리액트에서는 이 초기렌더링을 다루는 render 함수가 있습니다.

render() {...}

render() 함수는 컴포넌트의 생김새를 정의하는 역할을 수행합니다.
html 형식의 문자열을 반환하는 것이 아니라
객체를 반환합니다.

이때 객체에는 뷰가 어떻게 생겼는지, 어떻게 작동하는지에 대한 정보를 담고있습니다.

 

** 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있습니다.

이때 render함수를 실행하면 내부에 있는 컴포넌트들도 재귀적으로 렌더링합니다.

이렇게 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고있는 정보들을 사용하여

HTML 을 만들고 이를 DOM 요소 안에 주입합니다.

렌더링 ->

HTML 마크업을 주입

DOM

---

 

 

🔍Virtual DOM

 

DOM은 동적 UI에 최적화되어있지 않다는 문제점이 있습니다.

규모가 큰 웹 애플리케이션에서 DOM에 직접 접근해 변화를 주다보면 성능이슈가 생길 수 있습니다.

이를 해결하기 위해 DOM을 최소한으로 조작하여 작업을 처리하는 방식을 택할 수 있습니다.

리액트에서는 virtual DOM을 이용해 문제를 해결합니다.

 

Virtual DOM은 업데이트 처리 간결성을 제공합니다.

UI를 업데이트하는 과정에서 생기는 복잡합을 해소하고 쉽게 업데이트에 접근할 수 있게합니다.