React 란 ?

자바스크립트 라이브러리로 오직 View만 신경 쓰는 라이브러리

→ 지속적으로 데이터가 변화하는 대규모 애플리케이션 만드는 것

원래라면 변경된 상황을 보통 View를 변형 시켜주는데 계속 View에 데이터가 쌓이다 보니 애플리케이션 규모가 크면 상당히 복잡해지고 제대로 관리하지 않으면 성능이 떨어질 수 있다

이것을 페이스북에서 고안한 방법은 기존 View를 날리고 처음부터 새로 렌더링 하는 방법이다.

이렇게 하면 애플리케이션 구조가 매우 간단하고 작성해야 할 코드 양도 많이 줄어듦

하지만 DOM은 느리기 때문에 웹 브라우저에서 CPU 접유율도 크게 증가할 것이고 메모리도 많이 사용하는데 이것을 해결 하기 위해 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 한 것이 React이다.

Component

• 특정 부분이 어떻게 생길지 정하는 선언체
• Component 하나에서 해당 Component 의 생김새와 작동 방식을 정의
• Component 안에는 또 다른 Component가 들어갈 수 있다.

렌더링

• 사용자 화면에 View를 보여 주는 것

초기 렌더링

• 맨 처음 어떻게 보일지 정하는 초기 렌더링 필요 이를 다루는 함수 render가 있다.

render(){...}

해당 함수는 Component가 어떻게 생겼는지 정의하는 역할

html 형식의 문자열을 반환하지 않고, View가 어떻게 생겼고 어떻게 작동 하는지 대한 정보를 지닌 객체를 반환.

render을 실행하면 내부에 있는 컴포넌트들도 재귀적으로 렌더링합니다.

최상위 컴포넌트 렌더링이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고, 이를 우리가 정하는 실제 페이지 DOM 요소 안에 주입합니다.

먼저 문자열 형태의 HTML 코드를 생성한 후 특정 DOM에 해당 내용을 주입하면 이벤트가 적용됩니다.

render 함수가 어떻게 생겼고 어떻게 작동하는지 객체를 반환하는데 Component 데이터를 업데이트 했을 때 단순히 업데이트한 값을 수정하는 것이 아니라 새로운 데이터를 가지고 render 함수를 또 다시 호출합니다.

그러면 그 데이터를 지닌 View를 생성

render을 하면 함수가 만들었던 Component 정보와 render 함수가 만든 컴포넌트 정보를 비교 후 둘의 차이를 알아내 최소한으로 DOM 트리를 업데이트

Virtual DOM

React의 주요 특징 이라 할 수 있다.

DOM (Document Object Model)

• 객체로 문서 구조를 표현하는 방법으로 XML, HTML로 작성
• 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS 적용
• DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입도 가능

하지만 동적 UI에 최적화 되어 있지 않다는 것

HTML은 자체적으로 정적이지만 Javascript를 이용하여 동적을 만들 수 있다. 하지만 규모가 큰 웹 애플리케이션에서 DOM에 직접 접근하여 변화를 주다 보면 성능 이슈가 조금씩 발생하기 시작한다. 느려진다는 말

DOM 자체는 빠르지만 웹 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리 페인트 하는데 이 과정에서 시간이 허비된다.

Virtual DOM

실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용

(마치 사본 DOM 느낌)

React 에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할ㅇ 때는 다음 세 가지 절차를 밟습니다.

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링을 합니다.
2. 이전 VirtualDOM에 있던 내용과 현재 내용을 비교합니다.
3. 바뀐 부분만 실제 DOM에 적용합니다.

윗 사진처럼 왼쪽이 기본 DOM이고 오른쪽이 Virtual DOM이라고 볼 수 있다.