[TO-DO-App] 투두앱을 만들어보자 by React

이전 포스팅

컴포넌트 폴더 밑에 폴더를 만들자.

할일에 대한 컴포넌트를 만들었다.

삭제 기능을 만들기 전에,

기존코드에서 할일 부분을 컴포넌트화 시켜서 재사용 가능하게 바꾸자.

TodoList 컴포넌트의 리스트를 만드는 부분이다

아이템의 아이디와 텍스트를 직접 사용하고 있다.

이것을 prop으로 넘기고 컴포넌트화 시키기 위해

key prop 이외에 다른 prop들을 추가한다.

handleUpdate와 handleDelete를 통해 업데이트와 삭제되었을때 로직을 작성해준다

업데이트 시에는 업데이트 된 todo(updated)와 같은 id를 가진 todo 만 updated 투두로 매핑해주고, 나머지는 그대로 둔다.

const handleUpdate = (updated) =>
        setTodos(todos.map(t => t.id === updated.id ? updated : t) );

삭제시에는 삭제된 todo(deleted)와 다른 id를 가진 todo들만 setTodo해준다(결과적으로 다른 id를 가진 todo만 거르므로(filter), 남은 todo에는 삭제된 todo가 빠지게 된다.)

const handleDelete = (deleted) =>
        setTodos(todos.filter(t => t.id !== deleted.id ));

이제 Todo.jsx 부분을 작성해보자

Todo 컴포넌트는 업데이트와 삭제에 관한 콜백함수로 적절히 처리해주어야한다.

삭제 버튼 추가를 위해 react-icons 라이브러리를 설치한다.

설치 후 다시 yarn start를 통해 시작해서 라이브러리를 포함한 react app 을 실행한다

react 아이콘 홈페이지에 가서 trash를 검색한다

React Icons

🔍 SearchPlease enter at least 3 characters to search...

react-icons.github.io

이제 삭제 아이콘을 만들어보자.

우선 리스트 태그로 리스트를 감싸고

input 태그로 checkbox 형태를 만들어준다.

htmlFor는 input 연결할 값을 적어준다

그리고 표시될 텍스트를 label 태그안에 표시한다.(todo.text)

그리고 button을 만들고 그 안에 리액트 아이콘 중 trash 아이콘을 하나 만들어준다

여기까지 하면 삭제된 리스트의 아이콘이 나오게 되는데, 아직 로직은 연결되지 않은 상태이다.

input 태그에 complete 인 할일을 어떻게 판단할 것인지에 대한 로직을 넣어보자

andante131