10장. 일정 관리 웹 애플리케이션 만들기

주로 쓰는 Prettier 설정

//.prettierrc
{
    "singleQuote": true,
    "semi": true,
    "useTabs": false,
    "tabWidth": 2,
    "trailingComma": "all",
    "printWidth": 80,
}

- <form />의 요소로 onSubmit이 있음.

-> onClick으로 클릭 버튼을 둘 수도 있지만 onSubmit 이벤트의 경우 인풋에서 엔터키를 눌렀을 때도 발생하기 때문에 편리함.

 

- Style 공부

.TodoListItem-virtualized {
  & + & {
    border-top: 1px solid #dee2e6;
  }
  &:nth-child(even) {
    background: #f8f9fa;
  }
}
.TodoListItem {
  padding: 1rem;
  display: flex;
  align-items: center;
  // &:nth-child(even) {
  //   background: #f8f9fa;
  // }

  .checkbox {
    cursor: pointer;
    flex: 1;
    display: flex;
    align-items: center;
    svg {
      font-size: 1.5rem;
    }
    .text {
      margin-left: 0.5rem;
      flex: 1;
    }
    //checked가 true일 때 적용되는 style
    &.checked {
      svg {
        color: #22b8cf;
      }
      .text {
        color: #adb5bd;
        text-decoration: line-through;
      }
    }
  }
  .remove {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    color: #ff6b6b;
    cursor: pointer;
    &:hover {
      color: #ff8787;
    }
  }
  // 엘리먼트 사이마다 테두리를 넣어 주는 style
  & + & {
    border-top: 1px solid #dee2e6;
  }
}

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

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 })} -->checked가 true이면 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);