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

랙(lag)을 경험하기 위한 많은 데이터 렌더링 해보기...
App.jsx 코드를 아래와 같이 수정해보자.

• App.jsx

import React, { useState, useRef, useCallback } from 'react';
import TodoTemplate from './components/TodoTemplate';
import TodoInsert from './components/TodoInsert';
import TodoList from './components/TodoList';
 
function createBulkTodos() {
  const array = [];
  for (let i = 1; i <= 2500; i++) {
    array.push({
      id: i,
      text: `할 일 ${i}`,
      checked: false,
    });
  }
  return array;
}
 
const App = () => {
  const [todos, setTodos] = useState(createBulkTodos());
 
  // 고윳값으로 사용될 id
  // ref를 사용하여 변수 담기
  const nextId = useRef(2501);
 
  (... // 생략)
};
 
export default App;

동작시켜 보면 아까와 달리 느려진 것을 느낄 수 있다.

❓🤔 느려지는 원인은 뭘까...?

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

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

✔ ‘할 일 1’ 항목을 체크할 경우 App 컴포넌트의 state가 변경되면서 App 컴포넌트가 리렌더링된다.

✔ 부모 컴포넌트가 리렌더링되었으니 TodoList 컴포넌트가 리렌더링되고 그 안의 무수한 컴포넌트들도 리렌더링되는 것...

‘할 일 1’ 항목은 리렌더링되어야 하는 게 맞지만, ‘할 일 2’부터 ‘할 일 2500’까지는 리렌더링을 안 해도 되는데 모두 리렌더링되어 느린 것임.

✔ 컴포넌트의 개수가 많지 않다면 모든 컴포넌트를 리렌더링해도 느려지지 않는데, 지금처럼 약 2,000개만 넘어가더라도 성능이 저하된다.

이런 경우에 컴포넌트 리렌더링 성능을 최적화해 주는 작업을 해 줘야한다. 즉, 리렌더링이 불필요할 때는 리렌더링을 방지해줘야 하는 건데, 어떻게 방지하는지 알아보자!