사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리

자바스크립트를 이용한 프론트 엔드 개발을 더 편리하게 해주는 라이브러리

웹사이트들이 복잡해지면서 모던웹에서 빠른 포퍼먼스를 내기위해

리액트는 Virtual Dom 을 활용하여 업데이트 해야하는 Dom요소를 찾아서 해당 부분만 업데이트 하기 때문에, 리렌더링이 잦은 동적이 ㄴ모던 웹에서 향상된 퍼포먼스를 낼 수 있다.

Vitual Dom

가상 돔 html 마크업 구조를 자바스크립트로 조작이 가능한 객체 형태로 모델링한 것을 document object model 이라고 한다.

프로그래밍 언어와 연결해서 UI요소를 조작할 수 있게 도와주는 역할

우리가 어떤 DOM 요소를 변경하게되면 브라우저는 새롭게 변경된 DOM을 토대로 새로운 화면을 그리는 것

돔의 요소의 변화가 생기면 브라우저는 이변화를 화면에 새롭게 표현하기 위해 여러가지 과정을 거친다

돔 요소의 변화 이후 요소들의 위치를 계한하는 레이아웃 단계가 가장 큰 연산비용이 든다

실제로 그려주는 페인트 단계

왜 리렌더링이 잦은 동적인 모던 웹에서 퍼포먼스의 개선이 필요했는가?

자바스크립트를 이용해 돔을 직접 조작하면 변경사항이 있을 때마다 레이아웃 단계와 페인트 단계를 초래하게 된다.

일반적으로 돔을 직접 조작하는 것은 비용이 크다

가상돔은 실제로 렌더링 되지는 않았지만, 실제 돔구조를 반영한 상태로 메모리에 있는 가상돔이다.

여기서 메모리에 있다는 것은 우리가 선언한 변수들

실제돔은 변경이 일어나면 브라우저 상에서 여러가지 단계를 거쳐 리렌더링이 일어나게 된다. 그렇지만 메모리상에 그냥 값으로 존재하는 가상 돔은 변경이 일어나도 이것이 브라우저 렌더링과는 직접적으로 일어나지 않는다. 아무리 많은 조작이 가상돔에서 일어나도 이는 브라우저의 렌더링을 일으키지 않는다.

가상돔은 한번에 묶어서 실제 DOM에 반영한다. 이것을 batching 이라고 한다.

예시) 만약에 네이버에서 버튼하나 만들고싶다 -> 가상돔을 이용하지 않으면 페이지 전체를 다시그려야한다. 가상돔에서는 그렇지 않고 버튼을 눌러서 뭐가 바뀌었지? 아 네이버 로고가 빨간색으로 변경되엇구나 ! 이걸 알아차리고 필요한 부분만 다시 그려준다.

컴포넌트, 선연형뷰, JSX, HOOK, State, Props 라는 키워드

SPA single page application , MPA multi page application

spa는 서버에서 html 페이지들을 일일이 다운로드 하는 것이 아니라, 하나의 마크업 HTML 파일을 만나서 클라이언트에서 데이터를 직접로딩해서 동적으로 화면을 표시한다.
즉 페이지를 이동할때마다 발생하는 깜박임이 없다