React 성능 잡기

1. 함수나 Object는 변수에 담아서 쓰자

메모리 공간을 아낄 수 있음.
컴포넌트가 재렌더링될 때 이름없는 함수나 Object는 매번 새로운 메모리 영역을 할당해줘야 하기 때문!

2. 레이아웃 변경 시 주는 애니메이션은 지양하자

width, margin, padding, left right top bottom 등의 레이아웃을 변경할 때 자바스크립트나 transition을 이용해 변경하는건 브라우저에게 부담스러움

따라서 transform이나 opacity같은 CSS 속성을 이용해 애니메이션을 주자!

3. 컴포넌트를 Lazy하게 import 하자

첫 페이지 방문 시에 필요없는 컴포넌트들은 필요해질 때 import되도록 만들자!

👀 Lazy Loading하는 방법

1. react 라이브러리에서 lazy, Suspense를 import 해온다.
2. import Detail 하던걸 lazy 함수를 이용해 저렇게 바꿔준다.
3. 라는 컴포넌트로 을 감싸준다.
4. fallback 속성엔 컴포넌트 로딩 전까지 띄울 원하는 HTML을 적어준다.

4. 재렌더링을 막자

import React, {useEffect, memo} from 'react';
function Cart(){
  return (
    <Parent name="홍길동" age="25"/>
  )
}

function Parent(props){
  return (
    <div>
      <Child1 name={props.name} />
      <Child2 age={props.age} />
    </div>
  )
}

function Child1(){
  useEffect( ()=>{ console.log('렌더링됨1') } );
  return <div>Child 1</div>
}
function Child2(){
  useEffect( ()=>{ console.log('렌더링됨2') } );
  return <div>Child 2</div>
}

이런 형태로 컴포넌트가 존재할 때, name이 바뀌면 Child1과 Child2가 모두 재렌더링됨.
사실 name에 영향을 받는 것은 Child1 뿐이기 때문에 Child2의 재렌더링은 불필요함.
이러한 불필요한 재렌더링을 막기 위해 memo()를 사용할 수 있음

let Child2 = memo(function(){
  useEffect( ()=>{ console.log('렌더링됨2') } );
  return <div>Child 2</div>
})

이렇게 쓰면 name이 바껴도 Child1만 재렌더링되고 Child2는 재렌더링 되지 않음.

👀 그렇다면 memo()를 막 남발해도 될까?

그건 아님. memo()로 감싼 컴포넌트는 기존 props와 바뀐 props를 비교하는 연산을 하는데 props가 크고 복잡하다면 이 연산이 오히려 부담스러울 수 있음.
props가 방대하거나 컴포넌트 내부 HTML 양이 적다면 안쓰는게 더 나을거임!

✔ 컴포넌트 렌더링 속도 측정하는 법

React Dev Tools를 설치하고 크롬 개발자도구의 Components 탭에서 props, state, hook 등을 확인할 수 있음

• 그래서 props가 잘 전해졌는지 확인
• state가 잘 변하고 있는지 확인
• 실시간 state, props 수정해보기
• 시계모양 버튼을 눌러 해당 컴포넌트 렌더링을 잠깐 정지해보기

Profiler 탭에서는 녹화 버튼(파란점) 을 눌러서 컴포넌트 렌더링 되는 속도를 측정해볼 수 있음

• 어떤 컴포넌트가 렌더링 시간이 젤 오래걸리는가
• 쓸데없이 재렌더링 자주되는 컴포넌트가 있는가
• 렌더링 필요없는 컴포넌트가 있는가

등을 파악해서 성능 최적화를 할 수 있음

출처: 코딩애플 리액트 강의