[5주차] 위클리 페이퍼 - React가 렌더링 하는 방식을 설명하세요.

Virtual DOM이란?

Virtual DOM은 실제 DOM의 가벼운 복사본으로, 메모리 내에서 이루어지는 DOM의 추상화 된 표현방식이라 보면 된다. 이것은 컴포넌트의 상태가 변경될 때마다 새로운 Virtual DOM 트리를 생성되며, 이전 Virtual DOM 트리외 비교(Differing)하기 때문에 실제 DOM 조작을 최소화할 수 있다는 특징이 있다. 이 구조는 주로 React에서 사용하게 된다.

다만, DOM을 복사하였기 때문에, 메모리와 CPU 오버헤드가 발생할 수 있다. 따라서, 성능이 중요한 일부 환경 (예: 임베디드 등)에서는 사용을 하지 않는 것이 나을 수도 있다고 한다. (이 경우 Vanilla JS 를 사용하는게 나을 수도 있다고 한다.) 일반적인 환경에서는 Diffing 알고리즘이나 배치 업데이트(모아서 업데이트)를 수행하기 때문에, DOM 조작을 직접하는 것보다는 효율성이 높아진다고 한다.

Virtual DOM은 메모리 내에서 작동하는 가벼운 트리 구조로 변경 사항을 빠르게 감지하고 처리하는 특징을 가지고 있으며, DOM은 브라우저에서 렌더링되는 트리 구조로, 직접 조작 시 성능 부담이 크다는 특징이 있다.

렌더링 과정

렌더링 과정과 용어에 대한 설명은 다음과 같다:

1. 초기 렌더링
   • 처음 실행 시, React는 모든 컴포넌트의 JSX를 Virtual DOM에 렌더링
   • 컴포넌트의 초기 상태를 기반으로 Virtual DOM 트리가 생성됨
2. 상태 변경
   • 컴포넌트의 상태(state) 또는 속성(props)이 변경되면, 새로운 Virtual DOM 트리가 생성
   • 상태나 속성이 변경되는 경우, 변경 사항을 감지하여 새로운 Virtual DOM 트리를 만듦
3. Diffing 알고리즘
   • 새로운 Virtual DOM 트리와 이전 트리를 비교하는 알고리즘
   • 두 트리 간의 차이점을 효율적으로 찾아내어, 실제 변경이 필요한 부분만을 식별
4. 배치 업데이트
   • 실제 DOM은 변경이 필요한 부분만 업데이트하는 방식으로 처리

리렌더링 조건

상태(State) 변경, 속성(Props) 변경, 컨텍스트(Context) 변경 상태일 때, 렌더링을 다시 실행하게 된다.

• 상태(State) 변경: 컴포넌트의 상태가 변경되는 경우, 해당 컴포넌트와 하위 컴포넌트가 리렌더링하게 된다.
• 속성(Props) 변경: 부모 컴포넌트에서 자식 컴포넌트로 전달되는 속성이 변경되는 경우. 자식 컴포넌트가 리렌더링하게 된다.
• 컨텍스트(Context) 변경: 컨텍스트를 사용하는 컴포넌트의 컨텍스트 값이 변경되는 경우. 해당 컴포넌트를 리렌더링하게 된다.

참고자료

• React 공식 문서
• Virtual DOM 설명
• 리액트 렌더링 과정
• 코드잇 문서