9. 컴포넌트 성능 최적화

Todo App에서 todo list를 많이 만들면 렌더링을 많이 하기 때문에 속도가 느려진다.

이를 정량적으로 확인해보자.

 

app 실행 후 개발자도구에서 Profiler를 클릭하면 왼쪽 상단에 파란색 녹화버튼이 있다.

녹화 버튼을 누른 후, 할 일 ~ 을 클릭한 뒤, 다시 녹화버튼을 눌러 녹화를 종료한다.

그러면 우측에 Render duration 값을 확인할 수 있다. 이는 리렌더링에 소요된 시간을 의미한다.

 

 

두 번째로, Ranked 버튼을 클릭하면 리렌더링된 컴포넌트를 오래 걸린 순으로 정렬하여 나열해준다. 

이 차트를 통해서 해당 컴포넌트와 관계없는 컴포넌트들이 리렌더링 되고 있는게 아닌지 확인도 가능하다.

 

그렇다면,, 느려지는 원인을 분석해보자!

 

컴포넌트는 언제 리렌더링 될까?

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

2 ) 자신의 state가 바뀔 때

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

4 ) forceUpdate 함수가 실행될 때

 

위의 상황에서는 '할 일' 항목을 체크할 경우 App 컴포넌트의 state가 변경되면서 App 컴포넌트 전체가 리렌더링된다. 따라서 클릭한 '할 일' 이외의 다른 항목들은 부모 컴포넌트가 리렌더링되기 때문에 함께 불필요하게 리렌더링된다.

 

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

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

React.memo를 추가해줌으로써, 이제 TodoListItem은 todo, onRemove, onToggle이 바뀌지 않으면 리렌더링하지 않게된다.

 

onToggle, onRemove함수가 바뀌지 않게 하기

1 ) useState의 함수형 업데이트 기능 사용

기존에 setTodos 함수를 사용할 때는 새로운 상태를 파라미터로 넣었다.

이 때, 상태 업데이트를 어떻게 할지 정의해주는 업데이트 함수를 넣으면된다.

setTodos를 할 때 todos => ~~~ 로 작성했더니 속도 측정 결과가 !!!!

 2 ) useReducer 사용

useReducer 를 사용할 때 두 번째 파라미터에 undefined를 넣고, 세 번째 파라미터에 초기 상태를 만들어주는 함수인 createBulkToodos를 넣었다. 그렇게 하면 컴포넌트가 맨 처음 렌더링될 때만 createBulkTodos가 호출되기 때문에 다른 컴포넌트에 변화가 있어 부모 컴포넌트가 달라지더라도 전체를 create하지 않는다.

 

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

 

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

할 일은 2500개 등록되어 있지만 실제로 화면에 표히되는 것은 9개이다. 나머지는 스크롤해야만 보이는데도 불구하고 전체 할 일을 렌더링하기 때문에 비효율적인 작업이 일어난다. 이 때 react-virtualized를 사용하면 리스트 컴포넌트에서 스크롤되기 전에 보이지 않는 컴포넌트는 렌더링하지 않고 크기만 차지하게끔 할 수 있다.

 

wow..!!