Page 20 -

1.1.1.1 초기 렌더링 1

어떤 UI 관련 프레임워크, 라이브러리를 사용하든지 간에 가장 처음 어떻게 보일지를 정하는 초
기 렌더링이 필요합니다. 리액트에서는 이를 다루는 render 함수가 있습니다. 리액트 시작

render() { ... }

이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 합니다. 이 함수는 html 형식의 문자열을
반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지 정보를 지닌 객체를 반환합니다. 컴포넌트

내부에는 또 다른 컴포넌트들이 들어갈 수 있습니다. 이때 render 함수를 실행하면 그 내부에 있
는 컴포넌트들도 재귀적으로 렌더링합니다. 이렇게 최상위 컴포넌트의 렌더링 작업이 끝나면 지
니고 있는 정보들을 사용하여 HTML 마크업(markup)을 만들고, 이를 우리가 정하는 실제 페이지
의 DOM 요소 안에 주입합니다.

그림 1-5 초기 렌더링
렌더링

DOM
HTML 마크업
주입
<div>…</div>

컴포넌트를 실제 페이지에 렌더링할 때는 분리된 두 가지 절차를 따르는데요. 먼저 문자열 형태의

HTML 코드를 생성한 후 특정 DOM에 해당 내용을 주입하면 이벤트가 적용됩니다.

1.1.1.2 조화 과정

리액트 라이브러리에서 중요한 부분인 업데이트를 어떻게 진행하는지 한번 알아봅시다. 우

선 리액트에서 뷰를 업데이트할 때는 “업데이트 과정을 거친다.”라고 하기보다는 “조화 과정
(reconciliation)을 거친다.”라고 하는 것이 더 정확한 표현입니다. 컴포넌트에서 데이터에 변화가 있
을 때 우리가 보기에는 변화에 따라 뷰가 변형되는 것처럼 보이지만, 사실은 새로운 요소로 갈아
끼우기 때문입니다.

이 작업 또한 render 함수가 맡아서 합니다. render 함수는 뷰가 어떻게 생겼고 어떻게 작동하는
지 객체를 반환한다고 했었죠? 컴포넌트는 데이터를 업데이트했을 때 단순히 업데이트한 값을 수

정하는 것이 아니라, 새로운 데이터를 가지고 render 함수를 또 다시 호출합니다. 그러면 그 데이
터를 지닌 뷰를 생성해 내겠죠?

029

리액트를 다루는 기술(본문출력용)0720.indb 29 2018-07-20 오전 11:25:19