todo app의 성능 최적화를 해보겠습니다 💥
컴포넌트 성능 최적화
- 가짜 할 일 목록 만들기
- 개발자 도구를 열어서 성능 확인하기 (목록을 체크해서 테스트)
느려지는 원인 분석
- 리렌더링이 되는 경우
1. 자신이 전달 받은 props가 변경될 때
2. 자신의 state가 바뀔 때
3. 부모 컴포넌트가 리렌더링될 때
4. forceUpdate
함수가 실행될 때
- 컴포넌트 리렌더링 최적화
-> React.memo
사용
- 최신 상태의 todos를 참조하는
onRemove
와 onToggle
도 todos가 바뀔 때마다 계속 만들어 진다.
💡 해결 방법
useState
의 함수형 업데이트
- 함수형 업데이트 : 업데이트를 어떻게 할지 정의
❗️개발 환경에서의 성능
$ yarn start
를 통해 개발 서버를 구동하면 실제 프로덕션에서 구동될 때보다 처리속도가 느리다. (프로덕션에서는 에러 시스템 및 Timing이 비활성화 됨)
- 프로젝트의 규모가 커질수록 성능 차이가 심하다.
- 프로덕션 모드로 구동하고 싶을 땐
$ yarn build
$ yarn global add serve
$ serve -s build
useReducer
사용
- 두 번째 파라미터에 초기 상태를 넣어 줘야 한다.
- 하지만, 두 번째 파라미터에
undefined
를 넣고 세 번째 파라미터에 초기 상태를 만들어주는 함수를 넣으면 초기 렌더링될 때만 세 번째 파라미터 함수를 호출한다.useReducer
사용의 장•단점
- 기존 코드를 많이 고쳐야 한다. -> 단점
- 상태를 업데이트하는 로직을 모아서 컴포넌트 밖에 둘수 있다. -> 장점
불변성의 중요성
- 불변성을 지키지 않으면 객체 내부의 값이 새로워져도 바뀐것을 감지 못함
-> React.memo
에서 서로 비교하여 최적화하는 것이 불가능하다.
얕은 복사 (shallow copy)
- spread(전개 구문) 사용하면 객체와 배열 내부의 값을 복사 못함, 가장 바깥쪽에 있는 값만 복사
immer
라이브러리 사용하면 쉽게 작성 가능
리스트 최적화
- 리스트 내부에서 사용하는 컴포넌트도 최적화해야 함
- 리스트로 사용되는 컴포넌트 자체도 최적화해주는 것이 좋다.
react-virtyalized 를 사용한 렌더링 최적화
- 리스트 컴포넌트에서 스크롤이 되기 전에 보이지 않는 컴포넌트는 렌더링하지 않고 크기만 차지하게 끔 한다.
- 스크롤하면 해당 위치에서 보여 주어야 할 컴포넌트를 자연스럽게 렌더링 시킴
😆awesome
- 사용하기 전 각 항목들의 크기를 px단위로 알아야 함
- 개발자 도구를 열어서 성능 체크
속도 장난아니네....💥💥