Day 9 - ReactJS로 TodoList 만들기 #2

https://studywithzpqmdh.tistory.com/86

Day 8 - ReactJS로 TodoList 만들기 #1

 

기존 ToDo 의 문제점은 정말 많다.

기존의 코드를 살펴보며 수정할 부분들을 차근 차근 수정시켜 Todo program을 발전시켜보겠다.

 

문제점을 살펴보면 다음과 같다.

1. 할 일을 체크 할 수 없다 -> 체크 박스 구현하기
2. 한 일과 할 일을 따로 볼 수 없다.
3. 오늘의 할 일이지만 오늘의 날짜를 알 수 없다.
4. 구현하는 데에 급급해서 모든 코드를 한 파일에 넣었다(리팩토링 어떻게 할 거?)

따라서 할 수 있는 것부터 천천히 고쳐가보기로 했다.

우선 파일을 나누었다.

참고한 블로그는 https://samweol.tistory.com/44 이다.

오늘의 할 일이라는 Title과 남은 할 일의 개수를 확인할 수 있는 Header

할 일을 적고 추가할 수 있는 Add

각각의 할 일을 관리하는 Item

Background에서는 뒷 배경을 설정하고 싶은데 아직 구현하지 못하였다.

 

각각의 파일에 대한 style을 담을 styles 폴더도 생성해주었다. (아직 스타일 적용을 하지는 않았지만)

 

한 파일에 뭉쳐져 있던 코드를 뜯어서 각각에 분리하고 그것들을 또 합치는 것은.. 

리액트 초보에게 조금 힘든 일이었다.

잘 작동이 되어야 하는데 화면에 보이지 않는 등의 문제가 계속 발생하였다.

하지만? 그래도 잘 렌더링되는 것을 보니 코드를 나누는 것은 성공했다.

확실히 코드 수정하기 편했다.

 

4. 구현하는 데에 급급해서 모든 코드를 한 파일에 넣었다 (성공!)

 

이제 1번을 해결하기 위해 할 일을 체크할 수 있어야 한다. 

이것은 Item.js 파일에 text를 보여주기 전에 <input type="checkbox"> 를 추가해주면 된다. 

하지만 했다고 체크를 해도 남은 할 일의 개수가 줄어들지 않고 있다.

checkbox가 선택되었는지 아닌지를 isChecked를 두어 관리하고자 했다.

우선 isChecked가 True라면 취소선과 글자 색상을 바꿔주고 False라면 기본 값을 가지도록 하였다. (잘 작동함 굿)

이제 체크한 할 일에 대해서 남은 할 일에서 빼주는 것이다.

Header 파일에서 filter 함수를 통해 isChecked가 false인 할 일의 개수만 세서 보여주도록 하였다.

잘 작동한다!! 굿

1. 할 일을 체크 할 수 없다 (성공!)

 

그리고 오늘의 날짜를 확인하면 더 편리할 것 같아서 날짜 format도 추가해주었다.

moment library를 통해 날짜 format을 지정해주었다. 아주 간편하게 사용이 가능하다!

 

3. 오늘의 할 일이지만 오늘의 날짜를 알 수 없다. (성공!)

 

다음에 수정할 사항은

1. 전체 할 일, 남은 할 일, 완료한 일을 구분하여 볼 수 있도록 구성
2. 스타일 다듬기