React - ToDoItem Check 기능 추가

이번 글에선 ToDoList에서 필수적인 기능인 Check기능을 추가해 보았습니다.

 

ToDo Item 각각마다 있는 ✔을 누르면 check의 상태가 false인 경우, Text의 색은 회색이 되며 가운데 줄이 쳐지게 됩니다.또한 저장소의 내용은 false에서 true로 변경됩니다.

true인경우에는 본래 아이템을 추가할 때의 상태처럼 되돌아 갑니다.

 

바로 기능이 적용된 모습을 보여드리겠습니다.

 

ToDoList with Check function

 

localStorage의 상태와 같이 비교하신다면 Work1,3,4는 checked라는 키값이 true인걸 볼 수 있습니다.

그에 따라 글씨의 색은 회색, 그리고 가운데에 취소선이 추가된 것을 볼 수 있습니다.

 

---

# 오늘의 작업

 

ToDoItem.css

.checked {
  color: grey;
  text-decoration-line: line-through;
}

 

ToDoItem.css에서는 checked라는 클래스명에 대해서 위의 코드를 추가했습니다.

 

 

ToDoItem.js

import React from "react";
import "./ToDoItem.css";

function ToDoItem({ id, text, checked, writeDate, itemRemove, itemCheck }) {
  return (
    <div className="item-container">
      <div className="item-remove" onClick={() => itemRemove(id)}>
        ✖
      </div>
      <div className={`item-text ${checked ? "checked" : ""}`}>{text}</div>
      <div className="item-check" onClick={() => itemCheck(id)}>
        ✔
      </div>
    </div>
  );
}

export default ToDoItem;

 

ToDoItem.js에서는 지난글에서 아이템을 지우는 것과 동일한 방법으로 ✔를 누르면 ToDoTemplate에 있는 itemCheck함수를 부르도록 하였습니다.

 

또한 Item의 상태가 바뀌면 ToDoItem Component가 다시 render 될 것이기 때문에 item-text의 className이 checked라는 값에 의해서 "checked"가 추가될 수도 혹은 추가되지 않을 수도 있도록 바꿔보았습니다.

 

 

ToDoTemplate.js

itemCheck = id => {
    this.toDoList.forEach(toDo => {
      if (toDo.id === id) {
        toDo.checked = !toDo.checked;
      }
    });
    this.saveToDos();
};

 

ToDoTemplate.js에서는 ToDoItem에 itemCheck라는 props로 넘겨줄 itemCheck()를 추가해줬습니다.

 

ToDoItem에서 id값을 넘겨주면 toDoList 배열의 각각의 객체가 가진 id값과 비교하여 해당 id를 가진 객체의 checked값을 변경합니다. 그리고 saveToDos를 호출하여 state와 localStorage의 내용을 변경하도록 했습니다.

 

 

---

# 참고 자료

 

https://velopert.com/3480

React 기초 입문 프로젝트 – 흔하디 흔한 할 일 목록 만들기 | VELOPERT.LOG

 

https://zinee-world.tistory.com/234

[CSS] 취소선 (text-decoration:line-through)

 

 

 

---

# 작성 록

2020.03.16

 

작업을 다해놓고 글까지 쓰는데 얼마 걸리지 않아 뿌듯함을 많이 느끼는 하루였습니다.바로 이어서 다음 작업도 진행하고 기록해야 할 것 같습니다.