본문 바로가기
[WEB]/React

React - ToDoItem Check 기능 추가

by hi_kmin6 2020. 3. 16.

이번 글에선 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

이 포스트는 Fastcampus 의 리액트 강의 에서 사용된 강의 자료로서, 부연설명이 조금 생략되어있습니다. 기초가 부족하시다면 좀 오래되긴 했지만 저의 강의목록 에서 나오는 3편, 4편, 5편, 7편을 가볍게 읽고오세요 (해당 강의들의 실습은 따라하지 않으셔도 됩니다) 0. 시작하기 이번에는 프론트엔드 기초를 다룰때면 흔히 만들게 되는 투두 리스트, 혹은 “할 일 목록” 을 구현해보겠습니다. (우리는 앞으로 위와 같은 프로젝트를 만들어가게 됩니다) D

velopert.com

 

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

 

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

text-decoration:line-through (CSS2) 단순 취소선은 모든 브라우저에서 지원된다. 아래와 같이 다중값을 적용할 수도 있다. Firefox에서는 취소선 스타일과 색을 지정할 수 있다. Property Value text-decoration..

zinee-world.tistory.com

 

 

 


# 작성 록

2020.03.16

 

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

 

 

 

'[WEB] > React' 카테고리의 다른 글

React - To Do Item의 hover 의사클래스와 word-break, scrollbar  (0) 2020.03.17
React - CSS작업  (0) 2020.03.16
React - To Do Item 삭제  (0) 2020.03.12
React - To Do Item 추가 기능  (0) 2020.03.11
React - ToDoTemplate Component 추가  (0) 2020.03.09