반응형
React Project
-
[React TodoList] 불변성, 최적화, 렌더링 최적화React/일정관리 프로젝트 2023. 3. 15. 09:44
리액트 투두리스트 보완 불변성의 중요성 불변성이란? 기존의 값을 수정하지 않으면서 새로운 값을 만들어 내는 것 TodoList 컴포넌트 최적화 하기 리스트 내부에서 사용하는 컴포넌트도 최적화 해야 하고, 리스트로 사용되는 컴포넌트 자체도 최적화해 주는 것이 좋다. react-virtualized를 사용한 렌더링 최적화 하기 리스트 컴포넌트에서 스크롤 되기 전에 보이지 않는 컴포넌트는 렌더링 하지 않고 크기만 차지하게 끔 할 수 있다. 스크롤 이벤트 발생 시, 스크롤 위치에서 보여 주어야 할 컴포넌트를 자연스럽게 렌더링 시킨다. 이 라이브러리를 사용하면 낭비되는 자원을 아주 쉽게 아낄 수 있다. 사용방법 1. 패키지 설치 npm install react-virtualized 2. UI 컴포넌트 px 알아보..