Todo List성능 최적화 #03_React.memo() 사용하기

"shouldComponentUpdate"라는 라이프사이클이 있지만 함수형 Component에서는 사용을 못함.
그래서 React.memo라는 함수를 사용해야 함.

Component의 props가 바뀌지 않으면 리렌더링하지 않도록 설정하여 함수형 Component의 리렌더링 성능을 최적화 할 수 있음.

React.memo를 적용하는 방법

엄청 간단하다.

TodoListItem.js

import React from 'react';
import {
    MdCheckBoxOutlineBlank,
    MdCheckBox,
    MdRemoveCircleOutline
} 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);

맨 마지막줄에 TodoListItem을 React.memo()안에 넣어주면 끝난다.
이제 onRemove, onToggle에 변화가 없으면 리렌더링을 안하게 된다.

TodoList.js에도 마찬가지로 React.memo를 적용해주면 된다.
리스트 관련 component를 만들때는 listItem, List 다 최적화 해줘야한다.

React.memo의 원리

React.memo가 적용된 component가 처음 렌더링을 하는 경우 결과를 Memoizing을 한다. 나중에 해당 component가 렌더링을 하게 되는경우, 이전에 Memoizing했던 것과 props가 같은지 확인하고, 같으면 불필요한 렌더링을 안하고 이전 Memoizing했던 내용을 재사용하게 된다.

자세한 내용은 아래 링크 참고
https://dmitripavlutin.com/use-react-memo-wisely/