자바스크립트 + 리액트 디자인 패턴

325

Chapter 12_

리액트 디자인 패턴

전체 목록을 모두 렌더링하는 대신 현재 화면에 보이는 행만 동적으로 렌더링합니다. 렌더링

되는 행은 전체 목록의 일부이며, 사용자가 스크롤함에 따라 보이는 영역 (윈도우 )이 이동합

니다. 리액트에서는

react

-

virtualized

16

같은 라이브러리를 사용하여 구현할 수 있습니

다. 브라이언 본

Brian

Vaughn

17

이 개발한 이 라이브러리는 스크롤되는 뷰포트 내에서 현재 보이

는 항목만 렌더링하므로, 한 번에 수천 개의 행 데이터를 렌더링하는 데 드는 리소스를 절약

할 수 있습니다.

12.11.1

윈도잉/가상화의 작동 방식

리스트 가상화는 현재 화면에 보이는 항목만 렌더링하여 성능을 최적화하는 기술입니다.

react

-

virtualized

에서 윈도잉

18

은 다음과 같은 방식으로 작동합니다.

■ 상대적인 위치

position

:

relative

를 가진 작은 컨테이너

DOM

요소 (예:

<

ul

>

)를 윈도우로 사용합니다.

■ 스크롤을 위한 큰

DOM

요소를 가집니다.

■ 컨테이너 내부에 자식 요소를 절대 위치

position

:

absolute

로 배치하고,

top

,

left

,

width

,

height

등의 스타

일을 설정합니다.

■ 한 번에 수천 개의 목록 요소를 렌더링하여 초기 렌더링 속도 저하 또는 스크롤 성능 저하를 ...