5.Todo List 앱 리뷰

'한 입 크기로 잘라먹는 리액트' 교재를 보면서

todolist 앱을 만들어 보았다.

추가 버튼을 이용하여 할 일을 추가하고,

할 일 컴포넌트에 있는 삭제버튼을 눌러 할 일 리스트를 하나씩 삭제하는 기능을 만들었다.

또한 검색기능을 통해 내가 추가한 할 일을 검색할 수 있도록 설정하였다.

 

하지만 코드가 원하는 방향으로 작동하지 않았다.

1. 검색 후 엔터 클릭 시 검색기능이 실행되지 않는다.

2.  할 일을 추가하는 경우 여러개가 아닌 하나의 목록만 추가가 가능하다.(여러 번 등록하면 계속 덮어쓰기가 된다.)

3. 삭제버튼 클릭 시 에러가 발생한다.

onDelete is not a function
TypeError: onDelete is not a function
    at onClickDelete (http://localhost:3000/main.0760cbd4dd82a9569dbd.hot-update.js:35:5)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:11217:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:11261:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:11318:35)
    at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/bundle.js:11332:29)
    at executeDispatch (http://localhost:3000/static/js/bundle.js:15476:7)
    at processDispatchQueueItemsInOrder (http://localhost:3000/static/js/bundle.js:15502:11)
    at processDispatchQueue (http://localhost:3000/static/js/bundle.js:15513:9)
    at dispatchEventsForPlugins (http://localhost:3000/static/js/bundle.js:15522:7)
    at http://localhost:3000/static/js/bundle.js:15682:16

 

다음에는 코드를 수정하여 기능을 제대로 구현할 수 있도록 해보아야할 것 같다.