지난 장에서 학습한 내용을 활용해 애플리케이션을 만들었습니다. 데이터가 적을 때 사용하는 것은 불편하지 않지만, 데이터가 무수히 많아지면 지연이 발생하여 애플리케이션이 느려질 것입니다. 이번 실습에서는 이를 해결하는 과정을 다룹니다. 이번 장에서는 많은 데이터를 렌더링하고, 크롬 개발자 도구로 성능을 모니터링하고, React.memo를 통해 컴포넌트 리렌더링 성능을 최적화하고, onToggle과 onRemove가 새로워지는 현상을 방지하고, react-virtualized를 사용하여 렌더링을 최적화하겠습니다. 11.1 많은 데이터 렌더링하기 우선 지연을 발생시키도록 많은 데이터를 렌더링하겠습니다. App 컴포넌트를 수정합니다. //App.js import { useState, useRef, useCall..

22-23/22-23 리액트 스타터 1 2022. 12. 29. 10:00

데이터가 무수히 많아지면 앱 속도가 느려지는 것을 체감할 정도의 지연이 발생한다. I. 많은 데이터 렌더링하기 => App 컴포넌트를 다음과 같이 수정하여 데이터를 추가하면 랙(lag)이 발생한다. createBulkTodos 함수를 만들어 2500개의 데이터를 자동 생성한다. //App.js function createBulkTodos() { const array = []; for(let i=1;i { const [todos, setTodos] = useState(createBulkTodos); const nextId = useRef(2501); (...) }; export default App; 주의할 점은 useState의 기본값에 함수를 넣어 주었다는 것이다. useState( createBulk..

22-23/22-23 리액트 스타터 2 2022. 12. 29. 10:00