- UI 구현하기
- Todo 추가 하기
- Todo 삭제 하기
- Todo 완료 상태 변경하기 (완료 ↔ 진행중)
위의 4가지 요건을 충족했다. 추가로 반복되는 컴포넌트를 찾아 분리하고 부모 컴포넌트에서의 호출을 통해 코드를 직관적이고 간결하게 만들어 보았다.
import React from 'react';
const TodoItem = ({ item, onDelete, onToggleDone }) => {
return (
<div className='todoForm'>
<h2>{item.title}</h2>
<p>{item.content}</p>
<div className='buttonEditContainer'>
<button
type='button'
className='deleteButton'
onClick={() => onDelete(item.id)}
>
삭제
</button>
<button
type='button'
className='doneButton'
onClick={() => onToggleDone(item.id)}
>
{item.isDone ? '완료 해제' : '완료'}
</button>
</div>
</div>
);
};
export default TodoItem;
리스트 생성, 삭제, 완료 부분이 계속 반복되기 때문에
TodoItem 라는 컴포넌트 파일을 생성하고, 이걸 기존 jsx파일에서 불러오는 식으로 구성했다.
인풋창
제목과 내용을 입력 후 추가하기 버튼을 누르면,
<div className='onGoing'>진행 중🔥</div>
<div className='List'>
{onGoingList.map(function (item) {
return (
<TodoItem
key={item.id}
item={item}
onDelete={deleteTodolist}
onToggleDone={toggleDone}
/>
);
})}
</div>진행 중🔥 섹션 하단에 위치하도록 컴포넌트 파일을 불러왔고,
리턴문 상단에 위치한 자바스크립트 문법으로 작성한 삭제, 완료 변수를 불러온 컴포넌트와 연결시켜주었다.
작동 여부 검사해보기
제목, 내용을 입력 후 추가하기 버튼을 누르면 리스트가 진행 중 섹션으로 들어가는 모습을 볼 수 있다.
그 후 완료 버튼을 누르면 완료 섹션으로 잘 이동된다.
삭제 하면 리스트가 없어지는 모습도 볼 수 있음!
문제점 및 셀프 피드백
우선 기능을 구현함에 있어서, useState를 사용하여 컴포넌트를 관리하는 것이 조금 익숙해졌다고 느꼈다. 하지만 isDone을 통해 진행 중인 리스트, 완료된 리스트를 분리하는 것이 막막했는데,
const onGoingList = todolist.filter((item) => !item.isDone);
const doneList = todolist.filter((item) => item.isDone);위 코드와 같이, 단순히 필터와 ! 를 사용하여 isDone이 true인 것, false인 것을 간단히 구분하면 되는 것이었다.
두번째로는 컴포넌트를 분리하는 것이 어려웠다.
추가하기 버튼을 누르면 계속 리스트 업이 되니까 추가되는 리스트를 컴포넌트로 분리해서 그걸 부모 컴포넌트에서 불러오면 되겠다! 라고 단순하게 생각은 되지만, 이를 구현하는게 좀 애매했다. 과제 해설 강의를 보고 반복적으로 컴포넌트 분리 연습이 필요함을 느꼈다.
세번째는 리스트 제목, 내용이 길어지면 리스트 폼 자체의 크기가 세로로 길어져서 리스트 안의 버튼 위치가 바뀌거나, 줄마다 리스트의 크기가 달라 ui가 매우 형편없어졌다.
1) 제목, 내용의 길이를 제한하여 해결하려 했지만, 만족스럽지 않았다.
2) 리스트 창 내부의 버튼 margin-bottom을 0으로 설정해봤는데 해결되지 않았다.
이 부분은 좀 더 찾아보고 보완할 필요가 있겠다.
