컴포넌트 성능 최적화

해당 책은 리액트를 다루는 기술 11장을 기반으로 작성된 글입니다.데이터가 무수히 많아지면 애플리케이션이 느려지는 것을 체감할 수 있을 정도로 지연이 발생한다. 실제 랙이 걸릴 정도의 많은 데이터를 렌더링해 보자. App.js 컴포넌트를 다음과 같이 수정해 보자.

지난 시간 사용했던 React.memo만으로는 컴포넌트 최적화는 끝나지 않는다.현재 프로젝트에서는 todos 배열이 바뀔 때마다 onRemove와 onToggle함수가 새롭게 바뀌기 때문이다. onRemove와 onToggle함수는 배열 상태를 업데이트하는 과정에서 최

기존의 값을 수정하지 않으면서 새로운 값을 만들어 내는 것을 불변성을 지킨다라고 한다. 전개연산자를 사용하면 객체나 배열 내부의 값을 얕은 복사를 하게 된다.내부의 값을 완전히 새로 복사하는 것이 아니라 가장 바깥쪽의 값만 복사된다.불변성을 지키지 않으면 객체 내부의

리스트에 관련된 컴포넌트 최적화시 리스트 내부에서 사용하는 컴포넌트도 최적화하고, 리스트로 사용되는 컴포넌트 자체도 최적화해주는 것이 좋다.TodoList.js 컴포넌트의 마지막을 React.memo()를 활용하여 바꾸는 코드는 현재 프로젝트 성능에 영향을 주지 않는다