React) 컴포넌트와 렌더링

React는 오직 V(View)만 신경 쓰는 라이브러이다.

 

1. 컴포넌트

React 프로젝트에서 특정 부분의 생김새와 재사용 가능한 기능들을 내장하며,

컴포넌트의 생김새와 작동 방식을 정의한 선언체이다.

 

 

2. 렌더링

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

React는 가상DOM을 사용해 렌더링을 이루지만, 변경된 부분만 실제DOM에 적용된다.

 

2.1 초기 렌더링

사용자에게 맨처음 어떻게 보일지를 정하는 작업

위의 작업은 render() 함수가 한다.

 

render() 함수는 뷰의 모습과 동작방식이 담긴 정보 객체를 반환한다.

최상위 컴포넌트가 render() 하면 자식 컴포넌트도 재귀적으로 렌더링 한다.

 

render() 함수가 실행되고, 해당 컴포넌트의 가상 DOM이 생성되며, 변경사항이 실제 DOM에 반영된다.

 

 

2.2 조화 과정(리렌더링)

뷰의 업데이트 과정을 거친다라고 생각하기 보다는 조화 과정을 거친다라고 하는 것이 정확하다.

컴포넌트의 데이터가 변화하면 뷰가 변하는 것이 아니라 사실 새로운 요소로 갈아 끼우는 것이다.

React의 엘리먼트는 한번 생성되면 변경이 불가능한 불변성을 갖고 있어서 가상DOM이 변화된 부분을 계산하고 변화된 정보를 기존 엘리먼트에 적용하는 것이다.

 

이 작업도 render() 함수가 맡아서 한다.

render() 함수가 동작하는 과정은 아래와 같다.

• render 함수가 뷰의 생김새와 작동 방법의 정보를 갖는 객체를 반환
• 컴포넌트는 데이터가 업데이트 됬을 때 새로운 데이터를 갖고 render 함수를 다시 호출
• render 함수가 DOM에 반환되는 결과를 바로 적용하지 않고 이전에 render 함수가 반환한 컴포넌트 정보와 비교
• Javascript를 이용해 두 뷰를 최소한의 연산으로 비교 후, 둘의 차이를 알아내 최소한의 연산으로 DOM 트리 업데이트 진행

 

이 방식을 보면 데이터가 업데이트되면 컴포넌트 전체를 다시 렌더링하는 것이 아니라

최적의 자원을 사용해(비교) 수행하는 것을 알 수 있다.