11.8.2 TodoList 수정

    크기를 알아냈다면 이제 TodoList 컴포넌트를 다음과 같이 수정해 주세요.

    TodoList.js

    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);

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.