리액트의 렌더링이란?

목차

1. 우리가 말하는 렌더링
2. 리액트가 말하는 렌더링
   1. Trigger
   2. Render
   3. Commit
3. 리액트의 화면 그리기
4. 렌더링을 알면 보이는 것들

우리가 말하는 렌더링

프론트 공부를 하다보면 렌더링이라는 어휘를 자주 접하게 됩니다. 이러한 렌더링은 화면을 그리는 작업을 의미합니다. 그 중 브라우저에서 렌더링은 브라우저 렌더링 엔진이 렌더 트리를 만들어 paint하는 것을 의미합니다. 하지만 많은 인기를 얻고 있는 React는 조금 다른 의미로 렌더링을 소개합니다.

리액트가 말하는 렌더링

리액트에서 렌더링은 컴포넌트를 호출하는 것입니다. 하지만 컴포넌트를 호출한다고 무조건 화면을 그린다는 것은 아닙니다. 리액트가 화면을 그리는 과정의 일부가 렌더링이라고 생각하는 것이 이해하기 쉬울 것이라고 생각합니다. 왜냐하면 공식문서에서는 리액트가 화면 그리는 과정을 3단계로 나누었습니다.

리액트의 화면 그리기

리액트가 화면 그리는 각 단계를 살펴보겠습니다.

Trigger (트리거)

트리거는 렌더링 과정을 호출하는 단계입니다. 트리거가 발생하는 경우는 초기 렌더링과 상태가 업데이트 될 때인 리렌더링입니다.

Render (렌더링)

렌더링은 컴포넌트를 호출하는 단계입니다. 초기 렌더링에서는 루트 컴포넌트를 호출하고, 이후 상태 업데이트로 인해 리렌더링을 트리거한 함수 컴포넌트를 호출합니다. 렌더링할 때 중첩된 컴포넌트의 경우 재귀적으로 호출하고 반환하여 렌더링을 수행합니다. 또한 초기 렌더링에서는 DOM 노드를 생성하고, 이후 리렌더링에서는 각 속성을 계산합니다.

Commit (커밋)

커밋은 리액트가 DOM에 변경 사항을 반영하는 단계입니다. 초기 렌더링에서는 DOM api(appendChild())를 통해서 화면에 그립니다. 이후 리렌더링에서는 변경된 속성을 DOM에 반영합니다. 중첩된 컴포넌트의 변경 사항이 없으면 커밋 단계를 수행하지 않습니다.

렌더링을 알면 보이는 것들

리액트의 화면 그리기 각 단계를 알고 있으면 렌더링 최적화 할 때 도움이 됩니다. 예를 들어, 불필요한 리렌더링을 최소한으로 줄이고자 하는 경우, useCallback, useMemo 등을 리액트에서 제공하는 Hook을 사용해 최적화 합니다. 이러한 Hook은 컴포넌트의 상태 변경을 최소화하거나 속성의 변경이 없도록하여 리액트의 화면 그리기 각 단계가 실행되지 않도록 하는 것으로 이해할 수 있습니다. 이 외에도 여러 컴포넌트의 관계에서 왜 렌더링이 일어나는지 이해할 수 있고, 렌더링과 관련된 에러도 원인을 가늠할 수 있습니다.

참고

• Render and Commit (React 공식 문서)
• (번역) 브라우저는 어떻게 동작하는가?
• 브라우저는 웹페이지를 어떻게 그리나요? - Critical Rendering Path