function toggleDone(){
fetch(`http://localhost:3001/words/${word.id}`, {
method: 'PUT',
headers: {
'Content-Type':'application/json',
},
body: JSON.stringify({
...word,
isDone: !isDone,
}),
})
.then(res => {
if(res.ok){
setIsDone(!isDone);
}
})
}이 코드는 toggleDone 함수를 정의하고 있습니다. 이 함수는 API에 PUT 요청을 보내어 word 객체의 isDone 속성을 반전시키고, 해당 요청이 성공적으로 처리되면 해당 상태를 업데이트하는 역할을 합니다.
fetch 함수를 사용하여 API 요청을 보내며, http://localhost:3001/words/${word.id} URL로 요청을 보내고 있습니다. PUT 메서드를 사용하여 해당 URL에서 word 객체의 정보를 수정하고 있습니다.
요청 헤더에는 Content-Type 속성으로 application/json 값을 설정하고, 요청 본문에는 JSON.stringify() 함수를 사용하여 word 객체와 isDone 값을 반전시킨 객체를 JSON 문자열로 변환하여 전송하고 있습니다.
fetch() 메서드는 Promise 객체를 반환합니다. 따라서 .then() 메서드를 사용하여 요청의 응답을 처리하고, 응답이 성공적으로 처리되면 setIsDone 함수를 사용하여 해당 상태를 반전시키고 있습니다.
따라서, toggleDone 함수를 호출하면 word 객체의 isDone 속성을 반전시키고 API에서 해당 정보를 업데이트하며, 응답이 성공적으로 처리되면 해당 상태를 컴포넌트에서 업데이트합니다.
if(word.id === 0){
return null;
}
function del(){
if(window.confirm('삭제하시겠습니까?')){
fetch(`http://localhost:3001/words/${word.id}`, {
method: 'DELETE',
}).then(res => {
if(res.ok){
setWord({id:0});
}
});
}
}위 코드는 word 객체의 id 속성이 0인 경우에는 null을 반환하고, 그렇지 않은 경우에는 del 함수를 정의하는 코드입니다.
del 함수는 window.confirm() 메서드를 사용하여 삭제 확인 대화 상자를 표시하고, 확인 버튼을 클릭한 경우에는 fetch() 메서드를 사용하여 DELETE 요청을 보내어 http://localhost:3001/words/${word.id} URL에서 word 객체를 삭제하고 있습니다.
요청이 성공적으로 처리되면 setWord({id:0}) 함수를 호출하여 해당 word 객체의 id 속성을 0으로 업데이트합니다. 이로 인해 컴포넌트가 다시 렌더링되고, word.id === 0 조건문에 따라 null이 반환됩니다.
즉, word.id가 0인 경우 컴포넌트에서 아무것도 표시하지 않으며, 그렇지 않은 경우에는 del 함수를 호출할 수 있는 버튼 등을 표시할 수 있습니다. 이를 통해 word 객체가 삭제될 수 있습니다.
멋지다, chatgpt4!
설명 진짜 깔끔하고 알아듣기 쉽다.
앞으로도 잘 부탁해.
