11.8.3 TodoListItem 수정

    TodoList를 저장하고 나면 스타일이 깨져서 나타날 텐데 TodoListItem 컴포넌트를 다음과 같이 수정하면 해결됩니다.

    TodoListItem.js - render

    import React from 'react';
    import {
      MdCheckBoxOutlineBlank,
      MdCheckBox,
      MdRemoveCircleOutline,
    } from 'react-icons/md';
    import cn from 'classnames';
    import './TodoListItem.scss';
     
    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,
      (prevProps, nextProps) => prevProps.todo === nextProps.todo,
    );

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.