React] React 란...?

React

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. (최근에는 주로 TypeScript로 구현)

Web에만 있는 것은 아니며 모바일에서는 React Navive, 가상 App에서는 React 360 등이 사용된다고 합니다.

 

이벤트가 발생하여 DOM의 상태가 바뀌었을 때, 특정 DOM을 업데이트하기보다는

처음부터 다시 화면을 그림으로써, 업데이트할 때 복잡한 로직 등 고민할 것이 사라지게 됐습니다.

 

대신 화면은 전부 새로 그리기 때문에 속도가 굉장히 느릴 것으로 예상되며, 이를 해결하기 위해 가상 DOM (Virual DOM)을 사용됩니다.

 

 

 

---

 

 

가상 DOM

실제 보이는 DOM이 아니라

메모리에 가상으로 존재하는 DOM으로 JS객체이기 때문에 성능이 실제 브라우저보다 훨씬 빠릅니다.

state상태가 업데이트가 되면, 업데이트가 필요한 곳의 UI를 가상 DOM을 통해 렌더링 후 실제 브라우저의 DOM과 비교하여 업데이트하게 됩니다.

 

 

 

---

 

 

동작 원리

실제로 리액트는 2개의 가상돔을 가지고 있습니다.

첫 번째는 렌더링 이전의 화면 구조를 나타내는 돔

두 번째는 렌더링 이후에 보이게 해주는 가상 돔

리액트는 대표적으로 state가 변경될 때 리렌더링 하게 되는데, 이 시점에서 새로운 가상돔이 생성됩니다.

그리고나서 첫 번째 가상돔과 두 번째 가상돔을 비교하여 변한 Element를 확인하고(Diffing), 차이가 발생한 부분만 실제 DOM에 적용하게 됩니다.(Reconciliation)

 

여기서 state가 변할 떄 마다 업데이트 되는 것은 아니고,

Batch 라고 해서 바뀐 것들을 모아서 한 번에 그려주게 됩니다.

(Batch란, 여러개의 state 업데이트를 하나의 리렌더링으로 묶음. 16ms를 주기로 동작한다고 함.)

 

 

---

 

 

DOM업데이트를 좀 더 편하게 하기 위해, 전체적인 화면을 다시 렌더함으로써 복잡함 해결했다고 합니다.
이로 인해 발생하는 문제점인 성능 저하된 상황에서 가상 DOM을 통해 실제 DOM과 비교 후,
필요한 부분만 화면을 다시 그림으로서 속도문제 해결하게 됩니다.