[D+83] React를 이용해 투두앱(TO-DO) 만들어보기 (1)

 

 

D+83

-  React를 이용해 투두앱(TO-DO) 만들어보기 (1) -

(feat. 체크박스로 리스트 구현하기)

 

---

 

 

이번에 리액트를 배우면서 훅스에 대해 좀 더 깊이 있는 공부를 하기 전에

끝 매듭짓는 느낌으로 클래스를 통해 상태를 관리하고 porps를 사용하는 것에 대해

한 번 더 제대로 해보고 싶었고  단순히 테스트를 확인하기 위한 과정이 아닌

처음부터 끝까지 결과물을 만들어 보고 싶단 마음이 들었는데

마침 같이 공부하는 페어분께서 리액트를 통해 투두앱을 만들어보자는 제안을 해주셨다.

 

이틀정도 시간을 두고 그 후에 서로의 결과물을 확인하는 숙제느낌으로 후딱 만들기로 하였다.

 

 

그림으로 그려본 컴포넌트

본격 앱을 만들기 전에 각 컴포넌트의 위치를 대략적으로 파악하기 위해 그림을 그려 파악해 보았다.

 

• APP : 가장 상단에 위치

• AddTodo : 일정을 추가

• TodayList : 추가된 일정에 대한 목록들

• TodayListEntry : TodayList에 관련된 목록 하나하나

 

 

App.js

가장 상단에 위치한 App에선 지속적으로 변경될 list를 고려해 clss 형식으로 작성했으며,

list의 초기상태는 코드를 작성할 때, 잘 작동되는지 확인하기 위해 임시로 작성한 리스트를 넣어주었다.

 

또한 AddTodo에서 추가하기 버튼을 누를때 list의 목록을 변경하기 위해 addList를 만들어 주었다.

 

 

AddTodo.js

리스트를 추가하는 AddTodo는 input박스에 값이 잘 입력되도록 fillTodo를 onChange 할때마다 돌아가도록 하고,

이때 옆에잇는 버튼을 눌렀을 경우에 App에 있는 addList에 상태를 보내 목록이 추가 될 수 있도로 한다.

 

 

TodayList.js

그렇게 추가된 리스트들은 TodayList를 통해 화면에 보여줄 수 있도록 한다.

 

이때 list의 목록 하나하나를 map을 통해서 각각 구현될 수 있도록 한다.

 

 

TodayListEntry.js

TodayList를 통해 건너온 목록 하나는 화면에 보여줄 수 있게 렌더를 해주면 되는데

이때 인풋타입을 체크박스로 구현해 일정이 완료되면 체크될 수 있도록 해준다.

 

또한 단순히 체크만 되면 정확히 완료된 일인지 아닌지 구별하기 어렵기 때문에

목록을 클릭할 경우에 중간선이 나타날 수 있도록 check를 만들어주었다.

 

check는 for문을 돌려 list를 다 돌리다가 내가 클릭한 id와 일치할 경우에 스타일을 추가 시켜 중간선이 생기도록 하는 것이다.

 

 

이렇게 구현해서 만들어진 결과물이다.

 

INPUT TO-DO에 값을 입력한 뒤에 버튼을 누르면 위에 리스트들이 추가되고

해당 목록들을 클릭하면 체크가 되면서 취소선이 발생될 수 있도록 구현되었다.

 

만들고나서 살짝 허전함을 느꼈는데

목록 하나하나에 X버튼을 만들어 단순히 체크로 완료를 표시하는 것이 아니라

리스트의 특정 목록을 삭제할 수 있도록 하는 방법을 고민해봐야 할 것 같다.

 

이렇게 만들고 나니 제법 뿌듯...ㅎ