2021-05-07 :: 컴포넌트 성능 최적화1

많은 데이터 렌더링하기

성능 최적화를 경험하기 위해 먼저 많은 데이터를 렌더링해 보겠다.

function createBulkTodos() {
  const array = [];
  for(let i=0; i<2500; i++) {
    array.push({
      id:i,
      text: `할일 ${i}`,
      checked: false,
    });
  }
  return array;
}

function App() {
  const [todos, setTodos] = useState(createBulkTodos);
  const id = useRef(2500);

코드를 useState(createBulkTodos())와 같이 작성했다면 리렌더링될 때마다 createBulkTodos 함수가 호출되겠지만은 useState(createBulkTodos)처럼 파라미터를 함수 형태로 넣어주면 컴포넌트가 처음 렌더링될 때에만 createBulkTodos함수가 실행된다.

렌더링된 화면을 조작해 보면 이전보다 느려진 것을 느낄 수 있다.

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

성능을 분석할 때는 객관적인 숫자가 필요하다. 크롬 개발자 도구의 Performance 탭을 사용하면 작업에 정확히 몇 초가 걸렸는지 측정할 수 있다.

작업하는데 474ms가 소요되었고 warning이 발생했다. 이제부터 이를 최적화 하는 방법을 알아보겠다.