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

컴포넌트 성능 최적화

추가되어 있는 데이터가 무수히 많아지면, 애플리케이션이 느려집니다. 이러한 현상으로 렌더링 최적화를 하여 성능을 높여봅시다.

1. 많은 데이터 렌더링하기

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

3. React.memo를 통한 컴포넌트 리렌더링 성능 최적화

4. onToggle과 onRemove가 새로워지는 현상 방지하기

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

많은 데이터 렌더링

성능 분석 결과에 나타난 Timings에 작업이 처리되는 데 1.02초가 걸렸습니다.

데이터가 많으면 많을수록 시간이 오래걸려 성능이 매우 나쁘다고 판단됩니다.

 

느려지는 성능 원인 분석

1. 자신이 전달받은 props가 변경될 때

2. 자신의 state가 바뀔 때

3. 부모 컴포넌트가 리렌더링될 때

4. forceUpdate 함수가 실행될 때

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

컴포넌트의 리렌더링을 방지할 때느 shouldComponentUpdate 라이프사이클을 사용합니다.

함수형 컴포넌트에서는 라이프사이클 메서드를 사용할 수 없습니다. 대신 React.memo라는 함수를 사용합니다.

 

컴포넌트의 props가 바뀌지 않았다면, 리렌더링하지 않도록 설정하여 함수형 컴포넌트의 리렌더링 성능을 최적화해줄 수 있습니다.

 

import React from 'react';
import {
	MdCheckBoxOutlineBlank,
    MdCheckBox,
    MdRemoveCircleOutline,
} from 'react-icon/md';
import cn from 'classnames';
import './TodoListItem.scss';

const TodoListItem = ({ todo, onRemove, onToggle }) => {
	(...)
}

export default React.memo(TodoListItem); // React.memo(...)

 

 

함수가 바뀌지 않게 하기

함수는 배열 상태를 업데이트하는 과정에서 최신 상태의 todos 를 참조하기 때문에 todos 배열이 바뀔 때마다 함수가 새로 만들어집니다. 함수가 계속 만들어지는 상황을 방지하는 방법으로 useState 함수형 업데이트 기능을 사용하고, useReducer를 사용하는 것입니다.

 

useState의 함수형 업데이트

setTodos 함수를 사용할 때는 새로운 상태를 파라미더로 넣어주었습니다.

const [number, setNumber] = useState(0);
const onIncrease = useCallback(
	() => setNumber(prevNumber => prevNumber + 1),
	[],
)

개발 환경에서의 성능

개발 서버를 통해 보이는 리액트 애플리케이션은 실제 프로덕션에서 구동될 때보다 처리 속도가 느립니다. 실제 프로덕션 모드에서는 에러 시스템 및 Timing이 비활성화되어 처리 속도가 훨씬 더 빠릅니다.