react-virtualized를 사용한 렌더링 최적화

부제: 스크롤되기 전에 보이지 않는 컴포넌트는 렌더링하지 않고 크기만 차지하게 하기

 

 

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

const TodoList = ({ todos, onRemove, onToggle }) => {
  const rowRenderer = useCallback(
    // useCallback 훅을 사용하여 함수를 메모이제이션하고, 'todos','onRemove', 'onToggle'이 변경될때만 다시 생성되도록 함
    ({ index, key, style }) => {
      const todo = todos[index];
      return (
        <TodoListItem
          todo={todo}
          key={key}
          onRemove={onRemove}
          onToggle={onToggle}
          style={style}
        />
      );
    },
    [onRemove, onToggle, todos],
  );

  return (
    <List
      className="TodoList"
      width={512}
      height={513}
      rowCount={todos.length}
      rowHeight={57}
      rowRenderer={rowRenderer}
      list={todos}
      style={{ outline: 'none' }}
    />
  );
};

export default React.memo(TodoList);

이런 형태이다.

TodoList를 이렇게 수정하고 나면 스크롤 내릴때 버버버벅지지직 거리면서 스타일이 깨져서 나타남!!

TodoListItem 컴포넌트를 수정해줘야함

---

react-virtualized를 사용한 렌더링의 이점 

1. 렌더링 효율성: 가상 목록은 한 번에 화면에 보이는 항목만을 렌더링, 불필요한 작업을 줄여 성능 향상

2. 메모리 효율성: 대규모 목록을 모두 렌더링하지 않기 때문에 메모리 사용량을 줄일 수 있다. 특히 모바일 기기와 같은 리소스가 제한된 환경에 유용.

3. 빠른 스크롤링: 사용자가 목록을 스크롤할 때도 가상 목록은 화면에 보이는 항목만을 렌더링하기 때문에 스크롤 성능이 향상됨

4. 콘텐츠 업데이트 최소화: React의 렌더링은 상태나 props의 변경 시 발생하며, 이는 컴포넌트의 리렌더링을 초래함. react-virtualized를 사용하면 화면에 보이지 않는 항목들의 렌더링이 최소화되므로 불필요한 업데이트를 줄일 수 있음

5. 성능 향상: 렌더링 성능이 개선되어 사용자 경험이 향상됨