https://ko.reactjs.org/docs/optimizing-performance.html
내부적으로 React는 UI를 최신화하기 위해 비용이 많이 드는 DOM 작업의 수를 최소화하기 위해 몇 가지 기발한 방법을 활용합니다.
라고 하는데 DOM 작업 수를 줄이면 되는건가보군
앱을 배포할땐 프로덕션 빌드를 쓰시오!
- brunch 프로덕션 빌드
- browserify 프로덕션 빌드
- rollup 프로덕션 빌드
windowing 라이브러리
- react-window, react-virtualized
- 화면에 보이는만큼만 렌더링하자 사용자가 보고있는 DOM만 실제로 렌더링하자. 나머지부분은 사용자가 스크롤할때나 보여지도록하자
랜더링 다시 하는 경우를 생각해보셈
언제 리랜더링을 하느냐🤔
state가 변경될때, 부모 컴포넌트가 리랜더링되면 나도함께 리랜더링, 부모가 준 props가 바뀔때
그래서 제시하는 해결책은 props랑 state로 사용중인 값의 변경을 피하라
그래서 예시로 들어주는게 spread syntax...? Object.assign도 쓰라는데...?
lazy loading?
항상 레이지 로딩이 성능 향상을 보장하진 않음
lazy loading 장점
PLT 페이지 로딩 타임을 줄일수 있고, 리소스 지연 로드해서 시스템 리소스 사용 최적화 가능
그럼 언제 써야하느냐
🙆 내가 불러올 페이지는 리소스가 많고 길어서 lazy loading이 필요함
그렇다면 사용자가 보고 있는 화면단에는 지연로딩이 필요없지만 화면 밖 컨텐츠! 아직 보고있지 않는 그곳엔 lazy loading 필요
이건 노오오오
🙅 백그라운드 작업할때 필요한 resource는 절대 네버 지연로딩 하지마셈
🙅 그리고 lazy loading을 남발한다면? 사용자 경험이 구려짐
