[TodoList] Update, Delete - Todo 수정하기, 삭제하기

 

수정하기(onUpdate)와 삭제하기(onDelete) 기능을 구현한 코드를 중심으로, 동작 원리와 상태 관리 방식을 설명합니다.

---

1. 투두 수정하기: onUpdate

onUpdate 함수는 특정 투두 아이템의 완료 상태(isDone)를 토글하는 역할을 합니다.
todos 배열에서 해당 아이템을 찾아 isDone 값을 반전시키고, 이를 새로운 배열로 업데이트합니다.

 

* isDone : false 일때 

 

* isDone : true 일때 

 

코드 구현

const onUpdate = (targetId) => {
  setTodos(
    todos.map((todo) =>
      todo.id === targetId
        ? { ...todo, isDone: !todo.isDone } // 완료 상태 토글
        : todo
    )
  );
};

 

작동 원리

1. targetId를 기준으로 todos 배열을 순회하며, 수정 대상 아이템을 찾습니다.
2. 대상 아이템의 isDone 값을 반전시키고, 나머지 아이템은 그대로 유지합니다.
3. setTodos를 통해 상태를 업데이트하고, 리렌더링을 유도합니다.

 

사용 방법

• TodoItem 컴포넌트의 체크박스에 onChange 이벤트 핸들러로 연결됩니다.

const onChangeCheckbox = () => {
  onUpdate(id); // 체크박스 클릭 시 실행
};

---

2. 투두 삭제하기: onDelete

핵심 아이디어

onDelete 함수는 특정 투두 아이템을 배열에서 제거합니다.
targetId와 일치하지 않는 아이템들만 필터링해 새로운 배열을 생성합니다.

 

* 삭제하기 전 배열 데이터 

 

* 삭제한 후 배열 데이터 

코드 구현

const onDelete = (targetId) => {
  setTodos(todos.filter((todo) => todo.id !== targetId));
};

작동 원리

1. todos 배열에서 targetId와 일치하지 않는 아이템만 남깁니다.
2. 새로운 배열을 setTodos로 설정하여 삭제 후 상태를 업데이트합니다.

사용 방법

• TodoItem 컴포넌트의 삭제 버튼에 onClick 이벤트 핸들러로 연결됩니다.

const onClickDelete = () => {
  onDelete(id); // 삭제 버튼 클릭 시 실행
};

---

3. TodoItem 컴포넌트에서의 적용

TodoItem은 개별 투두를 렌더링하며, 수정 및 삭제 기능이 각각 체크박스와 삭제 버튼에 연동됩니다.

수정과 삭제 버튼

return (
  <div className="TodoItem">
    <input
      onChange={onChangeCheckbox} // 수정 기능 연결
      readOnly 
      checked={isDone} 
      type="checkbox"
    />
    <div className="content">{content}</div>
    <div className="date">
      {new Date(date).toLocaleDateString()}
    </div>
    <button onClick={onClickDelete}>삭제</button> // 삭제 기능 연결
  </div>
);

 

---

4. 완성 

 

수정하기와 삭제하기 기능까지 넣어 

TodoList 를 최종적으로 완성시켜봤다. 

👏👏👏👏

 

 

하지만 TodoList의 기능과 디자인이 부족한 것 같다고 생각해

추후에 업데이트하여 추가해 볼 예정이다.