[React] 컴포넌트 성능 최적화

✅ 성능 측정하기

• 크롬 개발자 도구에서 React DevTools를 사용해 측정
• 설치 후 Profiler 탭으로 이동
• 녹화버튼 누르고, 페이지 이동 등 동작 후 녹화 중지
• 성능 분석 결과 조회 가능

✅ 성능 최적화하기

🔸 React.memo

• 클래스 컴포넌트의 리렌더링을 방지할 때는 shouldComponentUpdate 라이프 사이클 사용
• 함수형 컴포넌트에서는 그 대신 React.memo 함수 사용
• 컴포넌트의 props가 바뀌지 않았다면, 리렌더링 하지 않도록 설정
• 사용법 : export 할 때 React.memo로 감싸주기

...

export default React.memo(TestComponent);

🔸 useState 함수형 업데이트

• state를 업데이트하는 함수를 useCallback으로 감쌀 때 의존성 함수에 해당 state를 넣게 되고, 이는 state 변경시마다 재렌더링 발생의 원인
• 이를 함수 내 setState 값을 prev값을 활용한 함수형으로 정의함으로써 개선하는 방법

// state에 +1을 하는 함수 예시

const [num, setNum] = useState(0)
const increase = useCallback(()=>{
    setNum(prevNum => prevNum + 1)
}, [])

// 이렇게 하면 의존성 배열을 비워 함수의 재정의를 막을 수 있음

🔸 react-virtualized

• 하나의 최적화 라이브러리
• 리스트 컴포넌트에서 스크롤되기 전에 보이지 않는 컴포넌트는 렌더링하지 않고 크기만 차지하게 할 수 있음
• 스크롤되면 해당 스크롤 위치에 보여 주어야 할 컴포넌트 렌더링
• 리액트를 다루는 기술 서적 303p~ 참고