투두리스트 휴지통 만들기 (지우기,초기화,복구)

대망의 휴지통 마지막 시간입니다. 지우기, 초기화, 복구 순서로 진행할 것입니다.

 

 

 

 

지우기

아주 간단하게 끝낼 수 있습니다.

TodoList의 지우기 로직과 완전히 동일합니다.

 

 

 

Trash 컴포넌트에서 삭제 핸들러를 내려줍니다.

 

 

 

TrashMainItem에서 id 값을 인수로 전달하며 핸들러를 실행시킵니다. id값에 해당하지 않는 요소만 반환하여 trash State를 업데이트시켜 줍니다. 

 

 

 

마지막으로 trash값이 바뀔 때마다 localStorage에 업데이트 시켜주는 코드를 작성하면 끝입니다.

 

 

 

 

휴지통에서 '지우기'를 누르면 완전히 지워지는 것을 확인할 수 있습니다. 

 

 

 

 

 

초기화

초기화 버튼을 누르면 모달창을 통해 경고를 띄울 것입니다. 

 

 

 

https://studysmart.tistory.com/99

리액트 간단한 모달창 만들기

모달창 세팅에 대한 설명은 생략하겠습니다.

 

 

 

초기화 또한 정말 간단합니다. nuClear 핸들러가 실행되면 휴지통 정보를 가지고 있는 trash State를 빈 배열로 초기화하는 게 전부입니다. 

 

 

 

realClear 함수는 모달창 렌더링을 제어합니다. 위에서 만든 초기화 핸들러를 모달창에 적용해 주면 끝입니다. '예' 버튼을 눌렀을 때는 초기화를 시키는 동시에 모달창을 닫고, '아니요' 버튼을 누르면 초기화 없이 모달창만 닫습니다.

 

 

 

초기화 버튼을 누르면 오른쪽과 같은 경고 모달이 나오며, '예'를 클릭하면!

 

 

 

초기화와 동시에 모달창이 꺼지는 것을 확인할 수 있습니다.

 

* 멘트 수정

쓰레기통 -> 휴지통 

초기화 -> 비우기

정말 초기화하시겠습니까? -> 정말 휴지통을 비우시겠습니까?

 

 

 

 

 

복구

우선 복구 버튼을 눌렀을 때 실행 될 핸들러를 제작합니다. filter 메서드를 이용해서 클릭된 요소의 id값과 일치하는 trash 값을 backTodos 변수에 저장합니다.  적용한 뒤 console.log를 찍어보겠습니다.

 

 

 

복구를 눌렀을 때 해당 객체가 잘 출력되는 것을 확인할 수 있습니다. 이제 이것을 다시 todos에 넣어주면 됩니다.

 

 

 

localStorage에서 todos 데이터를 받아와서 todos State에 저장해 줍니다.

 

 

 

순서를 설명하겠습니다.

 

복구 버튼을 누른 요소를 backTodos 변수에 저장합니다. 그리고 복구와 동시에 휴지통에서 사라지게 하기 위해 Trash State에서 지워줍니다. 마지막으로 todos에 backTodos값을 추가해서 업데이트합니다.

 

이렇게 하면 복구버튼을 누르면 해당 요소는 휴지통에서 사라지며, 동시에 다시 todos State로 복귀할 것입니다.

 

 

 

최종적으로 useEffect를 이용해서, 각 값들이 변할 때마다 localStorage에 업데이트 시켜주면 끝입니다.

 

 

 

'복구' 버튼을 누르면 휴지통에서 사라지게 되며

 

 

 

다시 TodoList로 복구되는 것을 확인할 수 있습니다. 

 

 

 

 

 

휴지통도 이렇게 끝났습니다 😎😎😎😎 밤새는 걸 지양해야 할 것 같습니다. 밤새면서 코딩하면 시간 가는 줄은 모르는데, 머리보다 손이 먼저 나가게 되는 것 같습니다. 아무튼 휴지통 끝~~