- 구 가이드 : https://ko.legacy.reactjs.org/docs/optimizing-performance.html
긴 목록을 가상화하여 성능을 향상시키는 방법
- react-window와 react-virtualized 라이브러리를 활용하여 ‘windowing’ 기법을 적용하여 목록을 렌더링합니다.
재조정 피하기
- React는 렌더링 된 UI의 internal representation(virtual dom)을 빌드하고 유지/관리한다. state, prop이 변경되면 실제 DOM과 비교하여 업데이트 여부를 결정한다.
- shouldComponentUpdate 메서드를 사용하여 업데이트 실행을 막을 수 있다.
- 기본적으로 true를 반환하지만,
false
를 반환하도록 하여 업데이트를 막을 수 있음.
- 기본적으로 true를 반환하지만,
- 또는 React.PureComponent를 사용하여
props
와state
의 모든 필드 사이에서의 얕은 비교를 통해 업데이트 여부를 자동으로 결정합니다.