책 한권으로 시작하는 react (7)

ppby·2020년 7월 9일
0

ppby.TIL

목록 보기
7/26

todo app의 성능 최적화를 해보겠습니다 💥

컴포넌트 성능 최적화

  • 가짜 할 일 목록 만들기
  • 개발자 도구를 열어서 성능 확인하기 (목록을 체크해서 테스트)

느려지는 원인 분석

  • 리렌더링이 되는 경우
    1. 자신이 전달 받은 props가 변경될 때
    2. 자신의 state가 바뀔 때
    3. 부모 컴포넌트가 리렌더링될 때
    4. forceUpdate 함수가 실행될 때
  • 컴포넌트 리렌더링 최적화
    -> React.memo 사용
  • 최신 상태의 todos를 참조하는 onRemoveonToggle 도 todos가 바뀔 때마다 계속 만들어 진다.
    💡 해결 방법
  1. useState 의 함수형 업데이트
    • 함수형 업데이트 : 업데이트를 어떻게 할지 정의
      ❗️개발 환경에서의 성능
      • $ yarn start 를 통해 개발 서버를 구동하면 실제 프로덕션에서 구동될 때보다 처리속도가 느리다. (프로덕션에서는 에러 시스템 및 Timing이 비활성화 됨)
      • 프로젝트의 규모가 커질수록 성능 차이가 심하다.
      • 프로덕션 모드로 구동하고 싶을 땐
        $ yarn build
        $ yarn global add serve
        $ serve -s build
  2. useReducer 사용
    • 두 번째 파라미터에 초기 상태를 넣어 줘야 한다.
    • 하지만, 두 번째 파라미터에 undefined 를 넣고 세 번째 파라미터에 초기 상태를 만들어주는 함수를 넣으면 초기 렌더링될 때만 세 번째 파라미터 함수를 호출한다.useReducer 사용의 장•단점
    • 기존 코드를 많이 고쳐야 한다. -> 단점
    • 상태를 업데이트하는 로직을 모아서 컴포넌트 밖에 둘수 있다. -> 장점

불변성의 중요성

  • 불변성을 지키지 않으면 객체 내부의 값이 새로워져도 바뀐것을 감지 못함
    -> React.memo 에서 서로 비교하여 최적화하는 것이 불가능하다.

얕은 복사 (shallow copy)

  • spread(전개 구문) 사용하면 객체와 배열 내부의 값을 복사 못함, 가장 바깥쪽에 있는 값만 복사
  • immer 라이브러리 사용하면 쉽게 작성 가능

리스트 최적화

  • 리스트 내부에서 사용하는 컴포넌트도 최적화해야 함
  • 리스트로 사용되는 컴포넌트 자체도 최적화해주는 것이 좋다.

react-virtyalized 를 사용한 렌더링 최적화

  • 리스트 컴포넌트에서 스크롤이 되기 전에 보이지 않는 컴포넌트는 렌더링하지 않고 크기만 차지하게 끔 한다.
  • 스크롤하면 해당 위치에서 보여 주어야 할 컴포넌트를 자연스럽게 렌더링 시킴 😆awesome
  • 사용하기 전 각 항목들의 크기를 px단위로 알아야 함
  • 개발자 도구를 열어서 성능 체크

    속도 장난아니네....💥💥

profile
(ง •̀_•́)ง 

0개의 댓글