[리액트를 다루는 기술] 1. 왜 리액트인가?

리액트는 오직 view만 신경쓰는 라이브러리다.

리액트 라이버리는 뷰를 어떻게 렌더링하길레 데이터가 변할때마다 새롭게 리렌더링하면서 성능을 아끼고,

최적의 사용자 경험을 제공할수있었을까??

 

우선 리액트에대한 이해를 해보자

 

1. 초기 렌더링

render() { ... }

이 함수는 뷰가 어떻게생겼고, 작동하는지에 대한 정보를 지닌 객체를 반환하는 함수이다.

컴포넌트 내부에는 또다른 컴포넌트가 들어갈수있어서 이때 render함수를 실행하면 

내부에있는 컴포넌트도 재귀적으로 렌더링한다.

 

렌더링 : 사용자 화면에 뷰를 보여주는것이다.

 

즉 렌더링 -> HTML마크업생성 -> DOM요소 안에 주입

이런순으로 주입된다.

 

 

2. 조화과정 (reconcilation)

리액트는 데이터가 변화가있을때 새로운 요소로 갈아끼우므로 조화과정을 거친다라고 표현을한다

이작업또한 render함수가 맡아서 한다.

즉 데이터가 업데이트했을때 새로운 데이터를 가지고 render함수를 또 다시 호출해서 

render 함수가 반환하는 결과와, 이전에 render함수가 만들었던 컴포넌트 정보화 비교를해서

최소한의 연산으로 DOM 트리를 업데이트한다

 

 

즉 요약하자면

1. render함수로 뷰,작동정보가있는 함수로 뷰를 보여준다.

2. 데이터가 update할때 새로운 데이터를가지고 바뀐 컴포넌트와 이전컴포넌트와 비교해서 DOM트리를 업데이트한다

 

 

리액트에 대한 특징을알아보자

 

1. Virtual  DOM

DOM ( Document Object Model ) : 객체를 문서구조로 표현

HTML은 정적이고, 자바스크립트를 사용하여 이를 동적으로 만들었다.

하지만 흔히 접하는 큰규모의 애플리케이션들이 가지고있는 수많은 요소(element)를 사용하려면 자바스크립트로

DOM접근할때마다 , 변화시 웹브라우저가 CSS를 연산하고, 레이아웃을 구성하고, 페이지를 리페인트하는 과정에서 수많은 로딩이 생기게된다. 그렇기때문에 리액트는 Virtual Dom 방식을 사용해서 DOM 처리횟수를 최소화했다.

 

 

* 리액트의 Virtual DOM 방식

1. 데이트를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링

2. 이전 Virtual DOM에 있던 내용과 현재 내용 비교

3. 바뀐 부분만 쉴제 DOM 에 적용

 

그렇다면 Virtual DOM을 어떻게 사용해야 성능상 진가를 볼수있을까?

리액트의 매뉴얼을 보면 이렇게쓰여있다.

우리는 다음 문제를 해결하려고 리액트를 만들었습니다.
지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기

즉, 적절한 곳에 사용해야 리액트가 가진 진가를 발휘할수있다고 한다.

 

 

이렇게 리액트에대한 기본 정보를 보았다.

그렇다면 이제 진짜 리액트를 공부해보자