최적화 방법

느려지는 원인 분석

컴포넌트는 다음과 같은 상황에서 리렌더링이 발생한다.

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

2. 자신의 state가 바뀔 때

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

4. forceUpdate 함수가 실행될 때

기존 프로젝트의 상황을 분석해보면 '할 일 1' 항목을 체크할 경우 App 컴포넌트의 state가 변경되면서 App 컴포넌트가 리렌더링된다. 부모 컴포넌트가 리렌더링되었으니 TodoList 컴포넌트가 리렌더링되고 그 안의 무수히 많은 컴포넌트들도 리렌더링된다. '할 일 2' ~ '할 일 2500'은 사실 리렌더링 할 필요가 없다.

 

React.memo

클래스 컴포넌트는 shouldComponentUpdate를 사용하고 함수형 컴포넌트는 이것을 이용해 컴포넌트의 props가 바뀌지 않았다면, 리렌더링하지 않도록 설정할 수 있다.

이렇게 하면 todos 배열이 아닌 todo 하나의 객체를 받는 TodoListItem 컴포넌트는 리렌더링 되지 않는다.

 

useState의 함수형 업데이트

현재는 이벤트 핸들러 함수들이 todos 배열이 바뀔 때마다 함수가 새로 만들어진다. 이렇게 함수가 계속 만들어지는 상황을 방지하는 방법이다. 

기존에 함수 생성 기준으로 todos를 넣었는데 그것을 빼고, 함수형 업데이트(todos => ~~)만 넣어주면 된다.

 

useReducer

useState 대신 useReducer를 사용할 수 있다.

상태를 업데이트하는 로직을 모아서 컴포넌트 바깥에 둘 수 있는 장점이 있다.

 

불변성의 중요성

'불변성을 지킨다'란 기존의 값을 직접 수정하지 않고 새로운 값을 만드는 것을 의미한다. 우리가 지금까지 배열을 추가하거나 삭제했을 때, 새로 만든 것과 같은 뜻이다. 불변성을 지키지 않으면 객체 내부의 값이 바뀌어도 감지하지 못한다.

 

List 최적화

리스트를 최적화하기 위해서는 리스트의 요소와 함께 리스트 그 자체에서도 최적화 해야한다.