TodoList 만들기(4)

이제야 드디어.. CRUD를 구현해보기로 했다.

일단 할 일 추가 페이지에 오늘날짜가 있으면 좋을 거 같아서 간단하게 추가해봤다.

format 함수는 date-fns 라이브러리에서 지원하는 함수이다.

 

Create

input 창에 오늘 할 일을 입력하고 + 버튼을 누르면 아래에 list로 추가되도록 Create 기능을 만들어봤다.

+ 버튼을 누르면 위의 함수가 작동한다. format 태그 내부의 버튼이기 때문에 리렌더링을 막기 위해 preventDefault 메서드를 사용했다. 내용이 없을때는 작동하지 않도록 조건문을 넣었고, 내용이 있으면 해당 text를 setTodayList라는 reducer를 적용하여 dispatch 함수로 store로 보내준다.

setTodayList reducer는 받은 text 내용을 객체로 만들어서 store에 저장한다.

** key는 원래 index를 썻었는데 list를 추가하거나 삭제할 때 애니메이션이 제대로 동작하지 않아서 uuid로 키를 따로 만들어줬다. 왜 index를 key로 쓰지 말라고 하는지 몸으로 체감했다..

 

Delete

create는 완성했고 다음으로는 삭제 버튼을 만들고 기능을 적용시켰다. 

삭제 버튼을 누르면 handleRemoveClick 함수가 작동하는데, 애니메이션을 적용시키기 위해 setTimeout 함수를 사용하여 0.5초의 지연시간을 두고 삭제되도록 코드를 작성했다. 0.5초동안 애니메이션이 동작하고 삭제된다.

삭제는 removeTodayList 라는 reducer를 사용하여 store 배열에서 해당하는 index를 가진 요소를 찾아 배열에서 제거해준다.

 

LocalStorage 저장

만들어진 list를 TodayEnd 라는 페이지로 넘겨줘야 하는데, 그냥 상태에 저장한 값을 넘기면 페이지를 새로고침 하거나 나중에 다시 들어와서 오늘 할 일을 보려고 할때 저장된 상태가 없어지기 때문에 일단은 localStorage에 저장하기로 했다.

오늘 할 일 페이지에 submit 버튼을 만들고, submit 버튼을 누르면 store에 저장되어 있는 오늘 할 일 list 배열이 localstorage에 저장되도록 코드를 작성했다.

localstorage에 key값은 오늘날짜가 들어가도록 해줘서 오늘 할일을 업데이트하면 덮어쓰기가 되도록 해줬다.

 

Modal 창

버튼만 누르니까 뭔가 밋밋해서 Modal창이 뜨도록 해봤다.

Modal 컴포넌트를 만들어서 적당한 스타일링을 하고,

버튼을 누르면 조건부 렌더링이 되도록 해줬다.

 

 

블로그 글 쓰다 보니까 Update 기능을 만들지 않은것을 깨달았다.....