✅ 리액트란

오직 뷰(View)만 신경쓰는 자바스크립트 라이브러리

• 데이터가 변할 때 어떤 변화를 줄 지 고민하는 것이 아니라, 기존 뷰를 날리고 처음부터 새로 렌더링하는 것
• 따라서 더이상 어떻게 변화를 줄 것인지 신경 쓸 필요가 없음
• 렌더링: 사용자 화면에 뷰를 보여주는 것 (함수가 불려지는 것)

❓ 업데이트 시, 새로 렌더링 함에도 불구하고 성능을 유지할 수 있는 이유

자바스크립트를 사용하여 두 가지 뷰(이전 뷰, 업데이트 뷰)를 최소한의 연산으로 비교한 후, 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트 하기 때문이다.

✅ 리액트의 특징

Virtual DOM을 사용한다.

❗️ DOM (Document Object Model)

• 객체로 문서 구조를 표현하는 방법으로, XML이나 HTML로 작성한다.
• DOM 자체는 빠르지만, 웹 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트 해 시간이 허비된다.
• 즉, 동적 UI에 최적화 되어있지 않음 !

❗️ Virtual DOM

• 뷰에 변화가 있다면, 변화를 실제 DOM에 적용하기 전에 Virtual DOM에 먼저 적용시키고, 최종 결과를 실제 DOM으로 전달해 준다. (실제 DOM의 가벼운 사본과 비슷함)
• 이처럼 브라우저 내에서 발생하는 DOM 처리 횟수를 최소화하고 효율적으로 진행함으로써 성능을 개선시킬 수 있다.

🔆 업데이트 진행 과정
1. 데이터 업데이트 시 전체 UI를 Virtual DOM에 리페인팅 한다.
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
3. 바뀐 부분만 실제 DOM에 적용한다.