<aside> 👉🏿 기존 MVC, MVVM, MVW 모델에서 조회하거나 수정하고 변경된 사항을 부분적으로 수정하는데 있어
어플리케이션 규모가 크면 상당히 복잡해지고 성능도 떨어진다.
페이스북 개발팀은 위와같은 문제를 해결하려고 기존 뷰를 날려버리고 처음부터 새로 렌더링 하는
방식의 아이디어를 고안했고, 이로써 최대한 성능을 아끼고 편안한 사용자 경험을 제공하며,
구현하고자 개발한 것이 바로 React이다.
</aside>
<aside> 👉🏿 리액트는 오직 View(사용자에게 보이는 부분)만 신경쓰는 라이브러리이다.
사용자 화면에 View를 보여주는 것을 렌더링이라고 한다.
리액트는 어떻게 렌더링 하기에 데이터가 변할때마다 리렌더링하면서 성능을 아낄지 알아보자.
</aside>
<aside> 👉🏿 리액트에서는 초기 렌더링이 필요할 때 render함수를 사용한다.
render 함수는 컴포넌트가 어떻게 생겼는지 정의해주는 역할을 한다.
html 형식의 문자열을 반환하는게 아닌 뷰에대한 정보가 있는 객체를 반환한다.
컴포넌트 안에 또 다른 컴포넌트가 들어갈 수 있으며, render 함수 실행 시 내부 컴포넌트도
재귀적으로 렌더링 된다.
최상위 컴포넌트 렌더링이 끝나면 HTML마크업을 만들고 실제 페이지의 DOM에 저장.
</aside>
<aside> 👉🏿 컴포넌트에서 변화가 생기면 뷰가 변경되는것이 아니라 사실 새로운 요소로 갈아 끼우는 것이기
때문에 업데이트가 아닌 조화 과정을 거친다라고 표현해야 맞다.
이 또한 render함수가 실행되고 객체가 전달된다.
여기서 곧바로 결과를 DOM에 저장하는 것이 아닌
이전 DOM 트리와 변경된 DOM트리를 비교하여 최소한의 연산으로 비교한 뒤,
둘의 차이를 최소한의 연산으로 DOM 트리를 업데이트한다.
</aside>