React 리액트란?

React는 자바스크립트 라이브러리로 사용자 인터페이스를 만든다.

MVC, MVW등의 프레임워크와 달리 오직 V만 신경쓰는 프레임워크가 아닌 '라이브러리'

 

React는 데이터가 변할때마다 새롭게 리랜더링하면서도 성능을 아낀다.

사실 이 문장하나만으로는 말이 안되는데 여기에는 초기렌더링과 리렌더링의 개념의 이해가 필요하다.

1. 초기렌더링
맨 처음 어떻게 보일지 정한다. 리액트에서는 render함수를 사용한다.

2. 이후 업데이트가 진행될때 이 render함수가 다시 뷰를 생성하는데, 반환하는 결과를 곧바로 DOM에 반영하지않고 이전 컴포넌트와의 정보를 비교해 자바스크립트를 사용해 최소한의 연산으로 DOM트리를 업데이트하여 수행한다.
*리액트에서는 업데이트가 아니라 조화과정이라고 보는것이 맞다.
변화에 따라 변형되는게 아닌 사실 새로운 요소로 갈아끼우기때문

 

 

React의 특징

주요특징 중 하나는 Virtual DOM을 사용한다는것.

Virtual DOM을 사용하면 실제 DOM이 아닌 추상화된 자바스크립트 객체를 구성해 사용한다.

가벼운 DOM의 사본이라 볼 수 있다.

앞서 설명한 리렌더링이다.

데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링해 이전 Virtual DOM에 있던 내용과 현재 내용을 비교하고 바뀐 부분만 실제 DOM에 적용하게 된다.

https://standout.tistory.com/62

DOM, 문서 객체 모델

 

 

React를 사용한다고해서 무조건 빠르고 좋은 것은 아니다.

작업이 매우 간단할때는 오히려 사용시 나은성능을 볼 수 없다.

리액트와 Virtual DOM이 언제나 제공하는것은 업데이트 처리 간결성으로 업데이트 과정에서 복잡함을 모두 해소하고 쉽게 업데이트에 접근하는, '지속적으로 데이터가 변화하는 대규모 애플리케이션 구축'에 적합하다 하겠다.