Todo List성능 최적화 #01_bulk data입력해서 느려지게 하기
엄청 많은 데이터를 렌더링하게 되면 느려지기 때문에 성능최적화가 필요하다.
bulk data를 입력해서 렌더링을 해봤다.
function createBulkTodos() {
const array = [];
for (let i = 1; i <= 2500; i++) {
array.push({
id: 1,
text: `할 일 ${i}`,
checked: false,
});
}
return array;
}
const AppCopy = () => {
const [todos, setTodos] = useState(createBulkTodos);
//고유 값으로 사용될 아이디.
// ref를 사용하여 변수 담기
const nextId = useRef(2501);
const onInsert = useCallback(
(text) => {
const todo = {
id: nextId.current,
text,
checked: false,
};
setTodos(todos.concat(todo));
nextId.current += 1; //nextId 1씩 더하기
},
[todos],
);
const onRemove = useCallback(
(id) => {
setTodos(todos.filter((todo) => todo.id !== id));
},
[todos],
);
const onToggle = useCallback(
(id) => {
setTodos(
todos.map((todo) =>
todo.id === id ? { ...todo, checked: !todo.checked } : todo,
),
);
},
[todos],
);
return (
<TodoTemplate>
<TodoInsert onInsert={onInsert} />
<TodoList todos={todos} onRemove={onRemove} onToggle={onToggle} />
</TodoTemplate>
);
};
export default AppCopy;
createBulkTodos라는 함수를 만들어서 2500개 데이터를 입력했다. 확실히 느려졌다.
체크버튼, 삭제버튼, item추가 전부 느리게 작동한다.
Author And Source
이 문제에 관하여(Todo List성능 최적화 #01_bulk data입력해서 느려지게 하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@poiugit/Todo-List성능-최적화-01bulk-data입력해서-느려지게-하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)