<div id="readability-page-1" class="page"><article id="post-react/2024/01/29/[React다루는기술] 12.react-virtualize" role="article"><header> <time datetime="2024-01-29T00:00:00+00:00">29 Jan 2024</time> in <a href="/category/react/" data-flip="title">React</a> on <a href="/tag/react-dealwith/" data-flip="title">React 다루는 기술</a></header><div><code>react-virtualized</code>는 React를 사용하여 대량의 데이터를 효율적으로 렌더링하기 위한 라이브러리로, 리스트나 그리드와 같은 컴포넌트에서 성능을 최적화할 때 유용합니다. 안드로이드의 “RecyclerView” 기능과 동일한 역할이라고 볼 수 있다.결론부터 데이터가 10000 개면 스크롤 내에 사용자가 보이는 만큼만 컴포넌트를 만들고 스크롤 작동시에 컴포넌트를 새로 만드는게 아니라 재활용하는 개념이다.<ol><li><code>react-virtualized</code> vs. <code>RecyclerView</code>:<ul><li><code>react-virtualized</code>:<ul><li>React 컴포넌트를 통해 가상화된 리스트 및 그리드를 만들기 위한 라이브러리.</li><li>화면에 보이는 부분만 렌더링하고 나머지는 가상화하여 성능을 향상시킴.</li></ul></li><li><code>RecyclerView</code> (Android):<ul><li>안드로이드에서 사용되는 리스트 뷰 및 그리드 뷰의 최신 버전.</li><li>화면에 보이는 아이템만 렌더링하고, 스크롤 시에 재사용하여 성능을 최적화함.</li></ul></li></ul></li><li>유사한 동작 원리:<ul><li>두 기술 모두 대량의 아이템을 효율적으로 렌더링하기 위해 화면에 보이는 부분만 렌더링하고, 스크롤 시에 재사용하는 방식을 사용합니다.</li><li>이는 사용자 경험을 향상시키고 메모리 사용량을 줄여 성능을 최적화하는 데 도움이 됩니다.</li></ul></li><li>용도 및 활용:<ul><li><code>react-virtualized</code>는 React 기반의 웹 애플리케이션에서 사용됩니다.</li><li><code>RecyclerView</code>는 안드로이드 앱에서 사용되며, 안드로이드 생태계에서 리스트 및 그리드의 성능 최적화에 중점을 둔다.</li></ul></li></ol>아래 명령어 이후 TodoList.js 컴포넌트를 수정해야 한다.<div><pre><code>$ yarn add react-virtualized
</code></pre></div><blockquote>TodoList.js</blockquote><div><pre><code>import React, { useCallback } from "react";
import { List } from "react-virtualized";
import TodoListItem from "../TodoListItem/TodoListItem";
import "./TodoList.scss";

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

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

export default React.memo(TodoList);
</code></pre></div></div></article></div>

linked2ev

react-virtualized는 React를 사용하여 대량의 데이터를 효율적으로 렌더링하기 위한 라이브러리로, 리스트나 그리드와 같은 컴포넌트에서 성능을 최적화할 때 유용합니다.
결론부터 데이터가 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);

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

댓글