[React] 함수 컴포넌트에서 리렌더링 최적화를 위한 방법

 

 

 

 

함수 컴포넌트에서 React.memo() 함수를 사용하는 것만으로 컴포넌트 최적화가 끝나지는 않는다. 

예를 들어 최신 상태의 todos 를 참조하는 onClick 같은 함수가 있어서 todos 배열이 바뀔 때마다 함수가 새로 만들어진다고 할 때, 이렇게 함수가 계속 만들어지는 상황을 방지하는 방법은 두 가지이다.

 

 

 

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

예를 들어 기존에 setTodos 함수를 사용했다고 하면, 이 함수를 사용할 때 새로운 상태를 파라미터로 넣는 대신 상태 업데이트를 어떻게 할지 정의해주는 업데이트 함수를 넣음으로써 함수형 업데이트를 할 수 있다.

 

setNumber(number+1) 이 아니라 setNumber(preNumber => preNumber + 1) 과 같은 업데이트 함수를 넣어준다.

 

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

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

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

 

 

 

2. useReducer 사용하기

 

import TodoInsert from "./components/TodoInsert";
import TodoTemplate from "./components/TodoTemplate";
import TodoList from "./components/TodoList";
import { useReducer, useState, useRef, useCallback } from "react";

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

// useReducer 추가된 코드
function todoReducer(todos, action) {
  switch (action.type) {
    case "INSERT":
      return todos.concat(action.todo);
    case "REMOVE":
      return todos.filter((todo) => todo.id !== action.id);
    case "TOGGLE":
      return todos.map((todo) =>
        todo.id === action.id ? { ...todo, checked: !todo.checked } : todo
      );
    default:
      return todos;
  }
}

// ---------------------------- 이까지

const App = () => {
  // createBulkTodos() 형태로 파라미터를 넣어 주면 컴포넌트가 리렌더링 될 때마다 함수가 실행된다.
  // createBulkTodos 처럼 함수 형태로 넣어 주면 컴포넌트가 처음 렌더링 될 때만 함수가 실행된다.
  const [todos, dispatch] = useReducer(todoReducer, undefined, createBulkTodos);
  const nextId = useRef(2501);
  // 할 일 추가
  const onInsert = useCallback((text) => {
    const todo = {
      id: nextId.current,
      text,
      checked: false,
    };
    dispatch({ type: "INSERT", todo });
    nextId.current += 1;
  }, []);

  // 할 일 삭제
  const onRemove = useCallback((id) => {
    dispatch({ type: "REMOVE", id });
  }, []);

  // 체크박스 체크
  const onToggle = useCallback((id) => {
    dispatch({ type: "TOGGLE", id });
  }, []);

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

export default App;

 

useReducer 는 원래 두 번째 파라미터에 초기 상태를 넣는데 위 코드에서는 두 번째 파라미터에 undefined 를 넣고 세 번째 파라미터에 초기 상태를 나타내는 createBulkTodos 를 넣었다. 이렇게 하면 컴포넌트가 맨 처음 렌더링 될 때만 createBulkTodos 함수가 호출된다.

 

 

 

 

 

✍ 리스트 관련 컴포넌트를 작성할 때 데이터가 100 개 이상이거나 업데이트가 자주 발생한다면, 리스트 아이템과 리스트, 이 두 가지 컴포넌트 반드시 최적화해주기

 

 

 

3. react-virtualized 사용하기

리스트 컴포넌트에서 스크롤 되기 전에 보이지 않는 컴포넌트는 렌더링하지 않고 크기만 차지하게끔 할 수 있다. 따라서 스크롤 되면 해당 스크롤 위치에서 보여주어야 할 컴포넌트를 자연스럽게 렌더링하는 것이다.

 

# 라이브러리 설치
yarn add react-virtualized

 

import TodoListItem from "./TodoListItem";
import "./TodoList.scss";
import React, { useCallback } from "react";
import { List } from "react-virtualized";

const TodoList = ({ todos, onRemove, onToggle }) => {
  const rowRenderer = useCallback(
    ({ index, key, style }) => {
      const todo = todos[index];
      return (
        <TodoListItem
          todo={todo}
          key={key}
          onRemove={onRemove}
          onToggle={onToggle}
          style={style}
        />
      );
    },
    [onRemove, onToggle, todos]
  );
  
  return (
    <List
      className="TodoList"
      width={512}
      height={513}
      rowCount={todos.length}
      rowHeight={57}
      rowRenderer={rowRenderer}
      list={todos}
      style={{ outline: "none" }}
    />
  );
};

export default React.memo(TodoList);

 

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

const TodoListItem = ({ todo, onRemove, onToggle, style }) => {
  const { id, text, checked } = todo;
  return (
    <div className="TodoListItem-virtualized" style={style}>
      <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>
    </div>
  );
};

export default React.memo(TodoListItem);