완료,삭제 기능 구현

저번에 만들던 투두리스트에서 삭제기능과 완료기능 , 취소 기능을 구현해 보았다

 

export default function TodoList({ todos, isActive, setTodos }) {

const todoBox = { border: "1px solid black", padding: "20px" };

return (

<>

<h4>{isActive === true ? "해야 할 일" : "완료 한 일 "}</h4>

{todos

.filter((item) => item.isDone === !isActive)

.map((item) => {

return <Todo item={item} isActive={isActive} setTodos={setTodos} />;

})}

</>

);

}

 

 

기존에 있는 투두리스트에서 투두로 컴포넌트로 나누었다.

export default function Todo({ setTodos, isActive, item }) {

const handleDelteButtonClick = () => {

// setTodos((prev) => return prev.filter((t) => return t.id !== item.id));

setTodos((prev) => {

const newTodos = prev.filter((prevItem) => {

return prevItem.id !== item.id;

});

return newTodos;

// setTodos는 그 안에서 리턴한 값(newTodos)으로 todos를 변경시켜준다.

});

};

<button onClick={handleDelteButtonClick}>삭제</button>

 

 

 

 

필터함수를 이용하여 id 가져온 이전id값과 비교하여 다른것을 출력하여 새로운 투두스에 넣어서 리턴 해주었다

id 값이 같으면 그 값을 제외한 나머지가 출력되는 것이다.

삭제 누루기 전

삭제 누른 후

const handleSwichButtonClick = () => {

setTodos((prev) =>

prev.map((prevItem) => {

console.log("prevItem", prevItem);

console.log("item", item);

if (prevItem.id === item.id) {

return { ...prevItem, isDone: !prevItem.isDone };

} else {

return prevItem;

}

})

);

};

return (

<div

style={{

border: "1px solid black",

margin: "10px",

}}

key={item.id}

>

<h5>{item.title}</h5>

<p>{item.contents}</p>

<button onClick={handleSwichButtonClick}>

{isActive === true ? "완료" : "취소"}

</button>

<button onClick={handleDelteButtonClick}>삭제</button>

</div>

);

}

삭제와 같은 방식으로 아이디 값이 같은 것을 출력하고 isDone 값을 바꾸어 주었다 

 

아직 코드는 익숙하진 않지만 흐름은 어느정도 이해가 되는거 같다 ..