[React] 컴포넌트 성능 최적화_①React.memo 사용

컴포넌트 리렌더링 방지 시, shouldComponentUpdate 라이프사이클을 사용하면 된다.

하지만, 함수형 컴포넌트에서는 라이프사이클 메서드 사용이 불가능하므로 React.memo 함수를 사용한다.

📍 메모제이션 (Memoization)이란?
퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장하여 동일한 계산의 중복 수행을 줄이는 최적화 기능을 말한다.

✔ React에서는 React.memo()와 같은 기능을 통해 이러한 최적화를 수행할 수 있다.

📍 React.memo( )
React.memo( )는 React의 함수 컴포넌트 최적화를 돕는 함수다.
이 함수를 사용하면 컴포넌트가 동일한 props로 렌더링 될 때 리렌더링을 방지할 수 있다. 즉, 불필요한 렌더링을 줄여 성능 향상에 도움이 될 수 있다는 것!

👉 React.memo( ) 사용법
컴포넌트를 만들고 나서 감싸 주기만 하면 된다.

• TodoListItem 컴포넌트에 React.memo 함수 적용하기

  • TodoListItem.jsx

    import React from 'react';
    import {
     MdCheckBoxOutlineBlank,
     MdCheckBox,
     MdRemoveCircleOutline,
    } from 'react-icons/md';
    import cn from 'classnames';
    import './TodoListItem.scss';
    
    const TodoListItem = ({ todo, onRemove, onToggle }) => {
     (...)
    };
    
    // export default TodoListItem;
    export default React.memo(TodoListItem); 

이렇게 하면 이제 TodoListItem 컴포넌트는 todo, onRemove, onToggle이 바뀌지 않으면 리렌더링을 하지 않는다.

동작해보면 속도가 원래처럼 빨라진 것을 확인할 수 있다.