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

 

 

렌더링이란?

사용자 화면에 View(내용)를 보여 주는 것을 렌더링이라고 한다.

 

그렇다면 리액트 라이브러리는 뷰(View)를 어떻게 렌더링 하길래 데이터가 변할 때마다 새롭게 리 렌더링 하면서 성능을 아끼고, 최적의 사용자 경험을 제공할 수 있을까??

이것의 해답은 바로 초기 렌더링과 리렌더링에 있다.

 

초기 렌더링

리액트는 맨 처음 어떻게 화면에 보여질 지를 다루는 render() 함수가 존재한다.

이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다.

 

render() 특징

render() 함수는 html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 동작하는지에 대한 정보를 지닌 객체를 반환한다.

또, 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있어, render 함수가 실행되면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링 된다.

 

render() 작동 원리

1. 최상위 컴포넌트부터 렌더링 작업이 다 끝낸다.

2. 렌더링 작업에 대한 정보들을 가지고 HTML 마크업을 만든다.

3. 이를 실제 페이지의 DOM 요소 안에 주입한다.

 

리 렌더링

리액트에서 뷰(View)를 업데이트할 때는 "업데이트 과정을 거친다" 보다는 "조화 과정을 거친다"라고 표현하는 것이 더 정확하다.

그 이유는 컴포넌트에서 데이터에 변화가 있을 때마다 뷰(View)가 변형되는 것처럼 보이지만, 실제로는 새로운 요소로 갈아 끼우기 때문이다.

이 작업 또한 render() 함수가 하며 컴포넌트는 데이터를 업데이트했을 때 단순히 업데이트한 값을 수정하는 것이 아니라, 새로운 데이터를 가지고 render 함수를 또다시 호출한다.

그러면 그 데이터를 지닌 뷰(View)가 새롭게 생성되는 것!

하지만 render 함수가 반환한 새로운 뷰는 곧바로 DOM에 반영하지 않고, 이전 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교한다.

둘의 차이를 비교 후, 원하는 뷰로 리 렌더링 즉, 새로운 요소로 갈아 끼운다라고 볼 수 있다.

 

[이 글은 리액트를 다루는 기술을 보고 직접 정리한 내용입니다.]