[React.js] react-virtualized로 컴포넌트 최적화하기

npm i react-virtualized

github.com/bvaughn/react-virtualized/tree/master/docs#documentation

bvaughn/react-virtualized

List의 틀이 되는 부분

import { List, AutoSizer } from 'react-virtualized' //AutoSizer 부모의 크기를 받아옴
 
function TodoList(props) {
    const rowRenderer = useCallback(
        ({ index, key, style }) => {
            const todo = props.todos[index];
            return (
                <TodoListItem todo={todo} key={key} onRemove={props.onRemove} onToggle={props.onToggle} style={style} />
            )
        },
        [props.onRemove, props.onToggle, props.todos]
    )
 
    return (
        <AutoSizer disableHeight>
            {({ width }) => (
                <List
                    width={width} //부모의 크기를 받아왔다
                    height={513} //전체높이 disableHeight로 인해 설정할 수 있다.
                    rowCount={props.todos.length} //항목 개수
                    rowRenderer={rowRenderer} // 항목을 렌더링할 때 쓰는 함수
                    rowHeight={57} // 항목 높이
                    list={props.todos} // 배열
                    style={{ outline: 'none' }} // List에 기본 적용되는 outline 스타일 제거
                />
            )}
        </AutoSizer>
    )
}

 

List의 항목이 되는 부분의 최상위 div에 style props를 넘겨주면 style이 적용 되며 정상적으로 작동된다

function TodoListItem({ style }) {
 
    return (
        <div style={style}>
            ...
        </div>
    )
}