• 목차

• 이전에 만들었던 todo-app으로 진행

11.1 많은 데이터 렌더링하기

• 실제로 랙을 경험할 수 있도록 많은 데이터를 렌더링해보면 이전보다 속도가 느려진게 체감됨

import React, { useState, useRef, useCallback } from 'react';
import './App.css';
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;
}

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

  const nextId = useRef(4);

  const onInsert = useCallback(
    (text) => {
      const todo = {
        id: nextId.current,
        text,
        checked: false,
      };
      setTodos(todos.concat(todo));
      nextId.current += 1;
    },
    [todos],
  );

  const onRemove = useCallback(
    (id) => {
      setTodos(todos.filter((todo) => todo.id !== id));
    },
    [todos],
  );

  const onToggle = useCallback(
    (id) => {
      setTodos(
        todos.map((todo) =>
          todo.id === id ? { ...todo, checked: !todo.checked } : todo,
        ),
      );
    },
    [todos],
  );

  return (
    <TodoTemplate>
      <TodoInsert onInsert={onInsert} />
      <TodoList todos={todos} onRemove={onRemove} onToggle={onToggle} />
    </TodoTemplate>
  );
}

export default App;

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

• 성능을 분석해야 할 때는 느려졌다는 느낌만으로는 충분하지 않음
• 정확히 몇초가 걸렸는지 확인해야하는데
  • 크롬 개발자 도구의 Performance 탭을 사용하여 측정할 수 있음

11.3 느려지는 원인 분석

• 컴포넌트는 다음과 같은 상황에서 리렌더링이 발생함
  1. 자신이 전달받은 props가 변경될 때
  2. 자신의 state가 바뀔 때
  3. 부모 컴포넌트가 리렌더링될 때
  4. forceUpdate 함수가 실행될 때
• 현재 상황을 보면
  • '할 일 1' 항목을 체크할 경우 App 컴포넌트의 state가 변경되면서 App 컴포넌트가 리렌더링됨
  • 부모 컴포넌트가 리렌더링 되었으니 TodoList 컴포넌트가 리렌더링 되고
  • 그 안에 무수한 컴포넌트들도 리렌더링 됨
• 정작 변한건 '할 일 1' 컴포넌트 뿐인데 '할 일 2' 부터 '할 일 2500'까지 모두 리렌더링 되고 있으니 느림
• 이럴때는 컴포넌트 리렌더링 성능을 최적화 해주어야 함
  • 리렌더링이 불필요할때는 리렌더링을 방지해주도록

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

• 컴포넌트의 리렌더링을 방지할 때는 shouldComponentUpdate라는 라이프사이클을 사용하면 됨
  • 하지만 함수형 컴포넌트에서는 라이프사이클 메서드를 사용할 수 없음
  • 대신 React.memo 라는 함수를 사용해서 컴포넌트의 props가 바뀌지 않았다면, 리렌더링하지 않도록 설정할 수 있음
• 컴포넌트를 만들고 React.memo로 감싸주면 됨
• 이렇게만 해주면 TodoListItem 컴포넌트는 todo, onRemove, onToggle이 바뀌지 않으면 리렌더링을 하지 않음

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

const TodoListItem = ({ todo, onRemove, onToggle }) => {
  const { id, text, checked } = todo;

  return (
    <div className="TodoListItem">
      <div className={cn('checkbox', { checked })} onClick={() => onToggle(id)}>
        {checked ? <MdCheckBox /> : <MdCheckBoxOutlineBlank />}
        <div className="text">{text}</div>
      </div>
      <div className="remove" onClick={() => onRemove(id)}>
        <MdRemoveCircleOutline />
      </div>
    </div>
  );
};

export default React.memo(TodoListItem);

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