11컴포넌트성능 최적화

컴포넌트 성능 확인(f12개발자도구 performance 녹화 기능 클릭후 event 실행시 렌더링솏도 확인가능)

다음과 같이 데이터가 2000개 이상 열거될 경우 렌더링이 늦어지게 된다.

//App.js 수정
[...]
function createBulkTodos() {
  const array = [];
  for (let i = 1; i <= 2500; i++) {
    array.push({
      id: i,
      text: `할일 ${i}`,
      checekd: false,
    });
  }
  return array;
}
const App = () => {
  const [todos, setTodos] = useState(createBulkTodos);

  const nextId = useRef(2501);
  const onInsert = useCallback(
   [...]

1.이때 사용하는 것이 React.memo(함수형 컴포넌트에서 shouldComonentUpdate라이프사이클 사용할수 없으므로 이 함수를 대신사용),

//TodoListItem.js
[...]
	</div>
    </div>
  );
};

export default React.memo(TodoListItem);

2.setTodos함수를 업데이트 함수로 수정

//App.js
[...]
      setTodos((todos) => todos.concat(todo));
      nextId.current += 1;
    },
    [],
    //   setTodos(todos.concat(todo));
    //   nextId.current += 1;
    // },
    // [todos],
  );
  const onRemove = useCallback(
    (id) => {
      setTodos((todos) => todos.filter((todo) => todo.id !== id));
    },
    [],
    //      setTodos(todos.filter((todo) => todo.id !== id));
    //    },
    //    [todos],
  );
  const onToggle = useCallback(
    (id) => {
      setTodos((todos) =>
        todos.map((todo) =>
          todo.id === id ? { ...todo, checked: !todo.checked } : todo,
        ),
      );
    },
    [],
    //   setTodos(
    //     todos.map((todo) =>
    //       todo.id === id ? { ...todo, checked: !todo.checked } : todo,
    //     ),
    //   );
    // },
    // [todos],
[...]