리액트가 뭐에요?

페이스북 개발진이 만든 라이브러리

리액트는 자바스크립트로 데스크톱 애플리케이션을 만들 수 있는 라이브러리입니다.

페이스북 개발팀이 대규모 애플리케이션의 유지보수를 효율적으로 하고자 만들었습니다.

 

 

뷰만 고려하는 유지보수를 효율적으로 하기 위한 라이브러리

오로지 V(View)만 고려하는 라이브러리입니다.

데이터가 변경될 경우, 기존 뷰를 날려버리고 처음부터 새롭게 렌더링합니다.

렌더링을 다시 하면 CPU 점유율이 크게 오르고, 메모리도 많이 사용됩니다.

이런 문제를 해결하기 위해서 렌더링 방식을 두 가지로 나눕니다.

 

 

초기 렌더링 render() {...}

render 함수가 처음 보이는 화면을 결정합니다.

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

 

최상위 컴포넌트의 렌더링 작업이 끝나면 HTML 마크업(markup)을 만듭니다.

그 후, 실제 페이지의 DOM 요소 안에 주입합니다.

 

컴포넌트를 렌더링할 때, 두 가지 절차가 존재합니다.

1. 문자열 형태의 HTML 코드를 생성

2. 특정 DOM에 해당 내용을 주입

=. 눈에 보이는 화면이 등장

 

 

리렌더링 render() {...}

업데이트를 진행한다면, 앞서 말했듯 뷰가 변화하는 것이 아니라 아예 새로운 요소가 그 자리를 차지합니다.

render 함수가 이 작업을 합니다.

 

만약 데이터를 업데이트했다면, 뷰를 수정하지 않고 새로운 데이터를 가진 render 함수를 호출합니다.

이 상황에서 뷰는 업데이트 이전, 이후 두 가지가 존재하는 상태입니다.

즉, 데이터를 불러왔다고 바로 DOM에 덮어씌우는 것이 아닙니다.

 

이 상황에서 render 함수가 이전 DOM 트리와 새로운 DOM 트리의 차이점을 비교합니다.

자바스크립트를 사용하여 두 가지 뷰를 최소한의 연산으로 비교한 후, 차이점이 있는 DOM만 업데이트합니다.

 

방식 자체는 루트 노드부터 전체 컴포넌트를 처음부터 다시 렌더링합니다.

다만, 필요한 것만 골라서 업데이트하는 방식으로 최적의 자원만 사용하도록 구성됐습니다.

 

 

초기 렌더링, 리렌더링으로 렌더링을 두 가지로 나눠서 모두 렌더링하되, 필요한 부분만 업데이트를 해서 자원 소모를 최소화한다