[React] 가상돔 알아보기

리액트 프레임 워크는 가상돔을 활용해, 변경된 부분을 감지하여 효율적인 렌더링이 가능합니다.

[React] 가상돔 알아보기

 

[React] 가상돔 알아보기

 

요약

1. 가상돔이란 무엇이고, 어떻게 작동하는가?

2. 가상돔 적용과정

 

요약

 리액트 프레임워크는 JSX 코드를 분석하여 가상 돔을 생성한다. 만약 상태가 변경되면 이전 가상돔과 비교하여 달라진 부분을 감지하여 리렌더링한다.

1. 가상돔이란 무엇이고, 어떻게 작동하는가?

 브라우저가 HTML을 파싱할 때 생성하는 DOM과 동일한 형태이다. 다만 가상 돔은 실제 돔을 조작하는 것이 아니라, UI의 변경점을 확인하는 용도이다. 리액트 프로젝트가 실행되면 각 컴포넌트의 JSX 코드를 분석하여 리액트 요소를 생성한다. 이 요소들이 결합되어 가상돔을 구성한다.
 상태의 변경이 일어날 시, 이 과정을 반복하여 매번 새로운 가상돔이 생겨난다. 새로운 가상 돔이 생겨난 이후에는 이전의 가상돔과 비교하여 달라진 부분을 파악한다. 해당 부분만 재렌더링 하여, 효율적인 렌더링이 가능케 한다.

2. 가상돔 적용과정

1. 리액트 프로젝트가 실행되며, JSX 코드를 분석하여 리액트 요소 생성
2. 리액트 요소 결합하여 가상돔 생성
3. 상태 변경이 일어남
4. JSX 코드를 다시 분석하면서 새로운 리액트 요소 생성
5. 새로운 가상돔 생성
6. 새로운 가상돔을 직전 가상돔과 비교하여 달라진 부분 감지
7. 달라진 부분만 재렌더링