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

 

D+84

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

(feat. 삭제버튼 만들기)

 

---

 

 

전날에 만든 투두앱을 이어서 새로운 기능을 추가하려고 한다.

 

해당 목록을 삭제하고 싶을때 단순히 체크로 완료를 시키는 것이 아닌 목록 화면에서 아예 사라져버리는 기능이다.

 

사실 모든 투두앱이라면 가지고 있는 기능이지만 전날에 아무리 고민해도 구현방법이 생각나지 않아서

그냥 삭제버튼 없이 투두앱을 만들었는데 영 어색하기 짝이 없었다. ㅎㅎㅎ

 

그래서 이번에 날잡고 제대로 구현해서 클래스를 활용한 리액트를 완벽히 정복해 볼까 한다

 

 

App.js

으아... 그렇게 헤맸는데 정말 간단하게 list를 filter를 사용해

특정 목록의 id와 같지 않은 나머지 리스트만 나오도록 설정해 준 다음에

해당 결과값을 setState를 통해 상태값에 넣어주면 되는 아주 간단한 일이었다...

 

꼬인 문제라고 생각했는데 생각보다 단순한 일이었다니...

 

 

TodayListEntry.js

마무리로 X버튼을 생성해주고 버튼을 클릭할때 App에 있는 remove가 실행될 수 있도록 하면 완성이다.

 

 

드디어 완성된 최종 결과물이다.

 

값을 입력한 뒤에 해당 일정을 아예 화면에 보이지 않도록 삭제하고 싶을때 X버튼을 누르면

삭제가 진행될 수 있도록 하는 앱이다.

 

아직 리액트가 어색한 감이 있지만 그래도 class에서 상태관리는 방법은 어느정도 익힌것 같다.

 

다음에는 함수를 통해 상태를 관리할 수 있는 훅스를 이용해 투두앱을 만드는 시간을 가져봐야 할 것 같다.