[React] React의 가상화

가상화란?

많은 수의 UI 요소를 화면에 보이는 범위만 렌더링하여 성능을 최적화하는 기법

React는 컴포넌트를 렌더링 할 때 DOM 요소가 많아질수록 느려진다.

 

React의 Virtual DOM

React는 Virtual DOM을 사용해 변경된 부분만 실제 DOM에 반영하여 효율적으로 UI를 업데이트한다.

하지만 수 천 개 이상의 아이템이 있는 리스트를 렌더링 할 때는

 

1) 느린 초기 렌더링 시간 : 모든 아이템을 한꺼번에 DOM에 추가하려다 보니 초기 렌더링 시간이 길어진다.

2) 느린 스크롤 성능 : 스크롤 시 브라우저가 DOM 요소를 다시 계산하고 그리는 과정에서 버벅거림이 발생할 수 있다.

3) 높은 메모리 사용량 : 불필요한 DOM 요소들이 메모리를 많이 차지하게 된다.

 

이와 같은 문제가 발생할 수 있다.

 

React에서의 Windowing (Virtualization 가상화 기술)

1. 화면에 보이는 부분만 렌더링(Windowing)

- 사용자의 화면(viewport)에 실제로 보이는 아이템들만 DOM에 렌더링하고, 화면 밖의 아이템들은 렌더링하지 않는다.

2. 보이지 않는 아이템의 DOM 제거 및 재활용

- 사용자가 스크롤하여 화면에 새로운 아이템이 나타나면 화면 밖으로 사라진 아이템들의 DOM을 제거한다.

- 필요에 따라 기존 DOM 노드를 재활용하여 불필요한 DOM 생성 및 삭제를 줄인다.

3. 총 높이 유지

- 전체 리스트의 스크롤바가 자연스럽게 작동하도록 화면에 보이지 않는 아이템들의 공간까지 고려하여 리스트의 전체 높이를 가상으로 계산하고 유지한다.

 

가상화의 장점

1. 성능 향상 : DOM 요소의 수를 최소화하여 초기 렌더링 시간과 스크롤 성능을 향상시킨다.

2. 메모리 사용량 감소 : 불필요한 DOM 요소를 줄이기 때문에 메모리 사용량이 줄어든다.

3. 사용자 경험 개선 : 부드러운 스크롤과 빠른 반응 속도로 사용자의 만족도가 높아진다.

4. 확장성 : 수만, 수십만 개의 데이터도 효율적으로 처리할 수 있다.

 

가상화 라이브러리

1. react-window

- 최소한의 기능만 가지고 있어 파일이 가벼움

- 간단한 UI를 구성하는 경우 추천

 

2. react-virtualized

- 많은 기능을 가진 만큼 파일이 무거움

- 업데이트가 중단된 상태

 

3. @tanstack/react-virtual

- 커스텀 UI가 필요한 경우 추천

 

docs : https://github.com/bvaughn/react-window

GitHub - bvaughn/react-window: React components for efficiently rendering large lists and tabular data