스크롤 위치에 따라 필요한 항목만 렌더링하는 가상 스크롤 구현.
profiler를 사용하여 측정
https://keinn51.tistory.com/19#2-3. profiler tab 측정 방법-1
https://velog.io/@jiheon788/가상스크롤링-메모이제이션을-활용한-렌더링-성능-최적화
<Profiler
id="TaskLists"
onRender={(
id,
phase,
actualDuration,
baseDuration,
startTime,
commitTime
) => {
console.table({
id,
phase,
actualDuration,
baseDuration,
startTime,
commitTime,
});
}}
>
<div className="h-[200px]">
<VirtualScroll
itemHeight={40} // 각 TaskItem의 높이 (패딩과 마진을 고려하여 설정)
renderAhead={1} // 미리 렌더링할 항목 수
>
{taskLists.map((taskList, index) => (
<TaskItem
key={taskList.id}
taskList={taskList}
taskListColor={
TASK_LIST_COLORS[index % TASK_LIST_COLORS.length]
}
isMember={isMember}
/>
))}
</VirtualScroll>
</div>
</Profiler>
위와 같이 렌더링 지표를 테이블로 콘솔에 찍도록 커스텀 후 측정하였을 때, 카드리스트의 리렌더링 시간이 320.59ms에서 19.59ms로 93.89% 단축! (actualDuration)
전
후
