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

많은 데이터 렌더링하기

• check list 2500개 세팅

크롬 개발자 도구를 통한 성능 모니터링

1. F12로 개발자 도구로 들어가서 Performance탭에 들어간다.
2. 왼쪽 위 Record 버튼을 누르고 기록을 시작한다.
3. 리스트 중 하나를 체크하여 리렌더링 시킨다.
4. 1300ms 정도 걸린다.

느려지는 원인 분석

1. 자신이 전달받은 props가 변경될 때
2. 자신의 state가 바뀔 때
3. 부모 컴포넌트가 리렌더링될 때
4. forceUpdate 함수가 실행될 때

 

1. check list 1을 체크하면 App 컴포넌트의 state가 변경되면서 App 컴포넌트가 리렌더링된다.
2. 부모 컴포넌트가 리렌더링 되었으니 그 안의 2500개의 컴포넌트가 리렌더링된다.
3. 느리다. 그래서 최적화를 해줘야 한다.

React.memo를 사용하여 컴포넌트 성능 최적화

• 컴포넌트의 리렌더링을 방지할 때는 shouldComponentUpdate 라는 라이프사이클 사용한다.
• 함수형 컴포넌트에서는 라이프사이클 메서드를 사용할 수 없다.
• React.memo를 대신 사용한다.
• 이제 todo, onRemove, onToggle이 바뀌지않으면 리렌더링 되지 않는다.

onToggle, OnRemove가 바뀌지 않게 하기

• onRemove, onToggle 함수는 todos를 참조하기 때문에 todos 배열이 바뀔때마다 함수가 새로 만들어진다.

1. useState를 사용한다.
2. useReducer를 사용한다.

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

1. yarn add react-virtualized
2. react-virtualized는 보이지 않는 부분은 공간만 차지하고 보일때 렌더링해준다.
3. 2,491개를 렌더링 하지 않아 빠르다.