JSX&VartualDom

💡 JSX란 ??
→ JavaScrip Xml의 약자로 자바스크립트의 확장 문법.
리액트에서는 virtual DOM을 다루고 있기 때문에 html을 가장한 JSX를 사용해야 한다
JSX는 브라우저에서 실행되는 과정에서 자바스크립트 언어로 바뀌게된다.
리액트에서의 html.

virtual Dom?

Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념 -- 출처 react docs

무슨말인지 이해가 잘 가지 않아 다른 블로그를 찾아보았다.

DOM에 변화생기면, 렌더트리를 재생성하고 (그러면 모든 요소들의 스타일이 다시 계산됩니다) 레이아웃을 만들고 페인팅을 하는 과정이 다시 반복되는거죠.

복잡한 SPA(싱글 페이지 어플리케이션) 에서는 DOM 조작이 많이 발생해요. 그 뜻은 그 변화를 적용하기 위해 브라우저가 많이 연산을 해야한단 소리고, 전체적인 프로세스를 비효율적으로 만듭니다.

자, 이 이부분에서 Virtual DOM 이 빛을 발합니다! 만약에 뷰에 변화가 있다면, 그 변화는 실제 DOM 에 적용되기전에 가상의 DOM 에 먼저 적용시키고 그 최종적인 결과를 실제 DOM 으로 전달해줍니다. 이로써, 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능이 개선되는 것 이지요.
출처: https://velopert.com/3236

먼저 해당 블로그에서는 먼저 브라우저의 작동방식에 대해 설명하였다.

브라우저에서 HTML을 전달받으면 브라우저의 렌더엔진이 이를 분석(파싱)하고 DOM트리를 만든다.

그리고 CSS파일과 엘리먼트의 inline스타일을 파싱해 그 정보에따라 새로운 랜더트리 라는것을 만들고, 이 과정에서 각 요소의 스타일이 계산되면서 이 과정에서 다른 요소들의 스타일 속성을 참조한다.

렌더트리가 다 만들어지고나면 레이아웃(reflow라고도 함)과정을 거치며 각 스크린 좌표가 그려지고 어디에 그려져야하는지 위치가 주어진다.

그 다음 색을 입히는 painting과정이 일어나는데, 이때 DOM변화가 생기면 렌더트리를 재생성하면서 레이아웃을 만들고 페인팅하는과정이 다시 일어난다.

Virtual DOM은, 뷰에 변화가 있다면 실제 DOM에 적용되기 전에 가상의 DOM에 먼저 적용시키고, 최종적인 결과를 실제 DOM으로 전달해주기에 브라우저의 성능을 개선할 수 있다.

기존과 어떤게 바뀌었고, 어떤게 바뀌지 않았는지 자동화하여 우리가파악하지 않아도 된다는 것이 또한 장점.
(각 변화들의 동기화 작업을 거치지 않으면서 모든 작업을 하나로 묶어줄 수 있다.)

정리: JSX는 리엑트 전용 HTML이라고 할 수 있음.
virtual DOM: DOM을 추상화하여 나타낸 객체를 메모리에 만들어 놓는것을 의미,
이 객체를 이용해 웹페이지 구성요소를 제어할 수 있음. DOM 반복 조작에 의한 브라우저 렌더링 문제등을 해결하기위한 기술.