[React다루는기술] 12. react-virtualized

react-virtualized는 React를 사용하여 대량의 데이터를 효율적으로 렌더링하기 위한 라이브러리로, 리스트나 그리드와 같은 컴포넌트에서 성능을 최적화할 때 유용합니다.
안드로이드의 “RecyclerView” 기능과 동일한 역할이라고 볼 수 있다.

결론부터 데이터가 10000 개면 스크롤 내에 사용자가 보이는 만큼만 컴포넌트를 만들고 스크롤 작동시에 컴포넌트를 새로 만드는게 아니라 재활용하는 개념이다.

react-virtualized vs. RecyclerView:
- react-virtualized:
  - React 컴포넌트를 통해 가상화된 리스트 및 그리드를 만들기 위한 라이브러리.
  - 화면에 보이는 부분만 렌더링하고 나머지는 가상화하여 성능을 향상시킴.
- RecyclerView (Android):
  - 안드로이드에서 사용되는 리스트 뷰 및 그리드 뷰의 최신 버전.
  - 화면에 보이는 아이템만 렌더링하고, 스크롤 시에 재사용하여 성능을 최적화함.
유사한 동작 원리:
- 두 기술 모두 대량의 아이템을 효율적으로 렌더링하기 위해 화면에 보이는 부분만 렌더링하고, 스크롤 시에 재사용하는 방식을 사용합니다.
- 이는 사용자 경험을 향상시키고 메모리 사용량을 줄여 성능을 최적화하는 데 도움이 됩니다.
용도 및 활용:
- react-virtualized는 React 기반의 웹 애플리케이션에서 사용됩니다.
- RecyclerView는 안드로이드 앱에서 사용되며, 안드로이드 생태계에서 리스트 및 그리드의 성능 최적화에 중점을 둔다.

아래 명령어 이후 TodoList.js 컴포넌트를 수정해야 한다.

$ yarn add react-virtualized

TodoList.js

import React, { useCallback } from "react";
import { List } from "react-virtualized";
import TodoListItem from "../TodoListItem/TodoListItem";
import "./TodoList.scss";

const TodoList = ({ todos, onRemoveTodo, onToggle }) => {
  const rowRenderer = useCallback(
    ({ index, key, style }) => {
      const todo = todos[index];
      return (
        <TodoListItem
          todo={todo}
          key={key}
          onRemove={onRemoveTodo}
          onToggle={onToggle}
          style={style}
        />
      );
    },
    [onRemoveTodo, onToggle, todos]
  );

  return (
    <List
      className="TodoList"
      width={512} //전체 크기
      height={513} //전체 높이
      rowCount={todos.length} //갯수
      rowHeight={57} //항목 높이
      rowRenderer={rowRenderer} //항목을 렌더링할 때 쓰는 함수
      list={todos} //배열
      style= //style
    ></List>
  );
};

export default React.memo(TodoList);

Share this post