React / 초기 렌더링과 리렌더링

*초기 렌더링

 

어떠한 UI 관련 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 사용자 화면에 뷰를 보여주는 것을 초기 렌더링이라고 한다. 리액트에서는 렌더링을 다루는 render함수가 있다.

render() {...}

 

render함수는 다음과 같은 특징이 있다.

 

• 컴포넌트를 정의
• 뷰의 모양새와 작동 방식에 대한 정보를 지닌 객체 반환
• 내부 컴포넌트 재귀적 렌더링(컴포넌트 내부엔 컴포넌트가 들어갈 수 있다.)

 

이러한 특징을 가진 render함수를 가지고 초기 렌더링을 할때 과정은 다음과 같다.

 

1. 내부컴포넌트 렌더링을 시작으로 최상위 컴포넌트와 내부 컴포넌트들을 렌더링함.
2. 최상위 컴포넌트 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만듬.
3. 실제 페이지의 DOM요소 안에 주입.
4. DOM을 사용자 화면에 뿌림.

 

컴포넌트를 실제 페이지에 렌더링할 때는 분리된 두가지 절차가 있다.

 

1. 문자열 형태의 HTML코드를 생성
2. 특정  DOM에 해당 내용을 주입하여 이벤트 적용

 

 

 

 

 

 

 

*리렌더링

 

리렌더링은 사용자 화면에 뷰를 다시 새롭게 보여준다는 의미인데 이것을 "업데이트 과정을 거친다." 또는 "조화 과정을 거친다" 라고 표현한다. 이유는 컴포넌트에서 데이터에 변화가 있을 때 우리가 보기에는 변화에 따라 뷰가 변형되는 것처럼 보이지만, 사실 새로운 요소로 갈아끼우기 때문이다.

 

리렌더링 또한 렌더링과 마찬가지로 render함수가 도맡아 수행한다. 컴포넌트는 데이터를 업데이트했을 때 단순히 업데이트한 값만 수정하는 것이 아니라 새로운 데이터를 가지고 render함수를 또 다시 호출하여 데이터를 가지는 뷰를 생성하고 이때 render함수가 반환하는 결과를 곧바로 DOM에 적용하지 않고 이전에 render함수가 생성했던 컴포넌트 정보와 현재 render함수가 생성한 컴포넌트의 정보를 비교한다. 

 

자바스크립트를 사용하여 두가지 뷰를 최소한의 연산으로 비교한 후, 둘의 차이를 알아내 최소한의 연산으로 DOM트리를 업테이트함.

결국 방식 자체는 루트 노드부터 시작하여 전체 컴포넌트를 처음부터 다시 렌더링하는 것처럼 보이지만, 사실 최적의 자원을 사용하여 이를 수행한다.