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

1. react - virtualized 라이브러리란?

windowing 라이브러리! windoing이란? 주어진 시간에 목록의 부분 목록만 렌더링하며 컴포넌트를 다시 렌더링하는 데 걸리는 시간을 줄이는 기법! 예를 들어 설명하면, 데이터각 100개가 있다면, 한 화면에 100개가 다 보이지는 않을 것이다. 그렇다면, 이 100개를 모두 렌더링할 필요가 있을까? 당연히 No 다. 그렇다면 지금 당장 사용자에게 보여져야 하는 부분만 렌더링을 함으로써 시간을 단축시킬 수 있고, 이것을 가능케 하는 것이 react-virtualized 이다. 

2. 어떻게 사용하는데?

1. 먼저 리스트의 아이템 하나하나를 렌더링해주는 함수를 다시 짜야 한다. 

//책 '리액트를 다루는 기술' 속 코드를 참고하였습니다. 
const rowRender = useCallback(
	({index, key, style}) => {
    	const todo = todos[index];
        return (
        	<TodoListItem
            	todo = {todo}
                key = {key}
                onRemove = {onRemove}
                onToggle = {onToggle}
                style = {style}
            />
        );
    },
    [onRemove, onToggle, todos],
);

2. List 컴포넌트의 props 에 이 rowRender 함수와 전체 크기와 높이, 항목의 개수, 항목의 높이, 배열을 넣어둔다. 그럼 List 컴포넌트가 알아서 최적화를 해준다! (넘넘 간단) 

import {List} from 'react-virtualized';

const TodoList = ({todos, onRemove, onToggle}) => {
...
return (
	<List 
    	className = "TodoList"
        width = {전체 크기}
        height = {전체 높이}
        rowCount = {todos.length} //항목 개수
        rowHeight = {항목 높이} 
        rowRender = {rowRender}
        list = {todos}
    />
);
};

export default React.memo(TodoList);

3. 언제, 왜 써야 하는데?

List 로 불러와야 하는 아이템의 수가 많으면 많을수록 이 라이브러리는 진가를 발휘한다! Profiler 를 이용해 직접 성능 테스트를 해 보면 왜 써야 하는지를 알 수 있다 :)