최적화 설정하기 (react-virtualized, immer)

react-virtualized

2,500 개 컴포넌트 중 2,491 는 스크롤하기 전에는 보이지 않음에도 불구하고 렌더링이 이루어집니다.

react-virtualized를 사용하면 리스트 컴포넌트에서 스크롤되기 전에 보이지 않는 컴포넌트는 렌더링하지 않고 크기만 차지하게끔 할 수 있습니다.

만약 스크롤되면 해당 스크롤 위치에서 보여 주어야 할 컴포넌트를 자연스럽게 렌더링 시킵니다.

 

yarn add react-virualized

 

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(
    ({ 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' }} // // List 에 기본 적용되는 outline 스타일 제거
    />
  );
};
export default React.memo(TodoList);

 

immer

불변성 유지하기위한 깊은복사를 쉽게해주는 라이브러리입니다.

 

yarn add immer

 

아래와 같이 사용합니다. 

 

import produce from 'immer';
const nextState = produce(originalState, draft => {
	draft.somewhere.deep.inside = 5;
});

 

immer 라이브러리가 기존에 객체배열일때는 ... 스프레드 연산자로 요소가지 바꾸는 작업을 더 간편하게 해줍니다.