[React]React란? React 개념

프론트엔드 라이브러리(React, Angular, Vue)를 사용하는 이유

: DOM 요소들이 변화하면 렌더 트리를 재생성, 리플로우, 리페인트 과정을 거치는데, 이것이 반복될수록 많은 연산을 함으로 이는 전체적인 프로세스의 비효율성을 야기한다.

-> 위와 같은 라이브러리는 DOM 관리와 상태 변화 관리를 최소화하고, 개개발자가 기능 개발과 UI에 집중할 수 있도록 도와준다.

 

자바스크립트를 업그레이드시킨

리엑트

 

1. 자동으로 UI를 업데이트한다.

새로고침 하지 않아도 자동으로 업데이트된다.

2. 코드 재사용을 많이 한다.

3. JSX(JS+HTML) 문법으로 코드 정리가 깔끔하다.

 

 

페이스북 개발팀이 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하지 않고, 

그냥 기존 뷰를 날리고 처음부터 새로 렌더링 하는 방식을 고안한 게 리엑트

 

이로써 애플리케이션 구조가 매우 간단해지고 코드양도 줄면서 더 이상 어떻게 변화를 줄지 신경 쓸 필요가 없어졌다.

그저 뷰가 어떻게 생길지 선언하고, 데이터 변화 시 기존에 있던 것을 버리고 규칙에 따라 새로 렌더링 하면 끝!

MVC, MCW도 아닌 오직 V만 신경 쓰는 라이브러리이다.

 

리엑트에서 컴포넌트란?　　

>> 특정 부분이 어떻게 생길지 정하는 선언체, 재사용이 가능한 API로 수많은 기능들을 가지고 있다.

컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의합니다.

 

Q. 리엑트에서는 데이터가 변할때마다 새롭게 리렌더링하면서 성능을 아낄 수 있을까?

(렌더링:사용자 화면에 뷰를 보여주는 것)

A. Virtual DOM을 사용하기 때문!

Virtual DOM 방식으로 DOM 업데이트를 추상화하여 DOM을 최소한으로 조작하여 작업을 처리한다.

리엑트에서 데이터가 변해 DOM을 업데이트할 때 다음 세 가지 과정을 거친다.

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리랜더링한다.

2. 이전 Virtual DOM의 내용과 현재 내용을 비교한다.

3. 바뀐 부분만 실제 DOM에 적용한다.

리엑트에서 뷰를 업데이트할 때는 "업데이트" 보단 "조화"를 거친다고 표현하는 것이 정확하다.

컴포넌트에서 데이터에 변화가 있을 때 변화에 따라 뷰가 변형되는 것처럼 보이지만,

사실은 새로운 요소로 갈아끼우는 것이다.