react 스터디에서 리액트를 다루는 기술이라는 책을 선정했고 이 책을 읽고 배운 것을 바탕으로 작성되었다.

🎈 리액트 이해

• 리액트는 MVC나 MVW 아키텍처를 사용하는 프레임워크와 달리, 오직 V(View)만 신경쓰는 자바스크립트 라이브러리이다.
• 데이터가 변할 때마다 뷰에 어떤 변화를 줄지 고민하는 것이 아니라 기존 뷰를 날려 버리고 처음부터 새로 렌더링한다.
• 컴포넌트: 렌더링할 React 엘리먼트를 반환하는 재사용 가능한 선언체이다.
  • 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에 생김새와 작동 방식을 정의한다.
• 렌더링: 사용자 화면에 뷰를 보여주는 것 (초기 렌더링 / 조화 과정)
• render 함수
  • 컴포넌트가 어떻게 생겼는지 정의한다.
  • html 형식의 문자열을 반환하지 않고 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다.
  • 컴포넌트 내부에는 또 다른 컴포넌트가 들어갈 수 있다. 이때 render()를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링한다.
  • 최상위 컴포넌트의 렌더링 작업이 끝나면 반환된 정보들을 사용하여 HTML 마크업을 만들고, 실제 페이지의 DOM 요소 안에 주입한다. (초기 렌더링)

😎 Virtual DOM

DOM (Document Object Model)

• HTML, XML 문서의 각 요소들을 계층적으로 표현하여 문서 내 요소들을 생성, 변경, 삭제할 수 있도록 돕는 인터페이스

DOM은 과연 느릴까?

• DOM 자체는 빠르다. DOM 자체를 읽고 쓸 때의 성능은 빠르다.
• 하지만 웹 브라우저 단에서 DOM에 변화(업데이트)가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트한다. (시간 소모가 크다)
• DOM을 조작할 때마다 엔진이 웹페이지를 새로 그리기 때문에 업데이트가 너무 잦으면 성능이 저하될 수 있다.

해결법 : DOM을 최소한으로 조작한다!

• Virtual DOM을 이용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행한다.
• Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. (실제 DOM보다 가벼운 사본)
• 리액트에서 뷰를 업데이트할 때 "업데이트 과정을 거친다"라고 하기보다는 "조화(reconciliation)과정을 거친다"라고 하는 것이 정확한 표현이다.
  • 컴포넌트는 데이터를 업데이트 했을 때, 새로운 데이터를 가지고 render()를 호출한다.
  • 하지만 이때 반환된 결과가 곧바로 실제 DOM에 반영하지 않는다.
  • 데이터가 업데이트되면, 전체 UI를 Virtual DOM에 리렌더링 한다.
  • 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
  • 바뀐 부분만 실제 DOM에 적용한다.

💡 지속적으로 데이터가 변화하는 대규모 애플리케이션 효율적으로 구축하기 위해 React 탄생
💡 React와 Virtual DOM이 제공할 수 있는 것은 View 업데이트 처리 간결성이다.

관련 영상: React and the Virtual DOM