데이터 삭제하기
완성본
삭제버튼을 통해 데이터 리스트를 제거한다.
App.js
function App() {
const [data, setData] = useState([]);
const dataId = useRef(0);
const onCreate = (author, content, emotion) => {
const created_date = new Date().getTime();
const newItem = {
author,
content,
emotion,
created_date,
id : dataId.current,
};
dataId.current += 1;
setData([newItem, ...data]); //...data는 원래데이터 + newItem은 새로운 데이터
}
const onDelete = (targetId) => {
console.log(`${targetId}가 삭제되었습니다.`)
const newDiaryList = data.filter((it) => it.id !== targetId);
console.log(newDiaryList);
setData(newDiaryList);
};
return (
<div>
<DiaryEditor onCreate = {onCreate} />
<DiaryList onDelete ={onDelete} diaryList = {data} />
</div>
);
};
-
onDelete()를 만든다.
-
onDelete는 DiaryItem에게 보내줘야 하므로 DiaryList를 통해 보내줘야 한다.
(DiaryList는 DiaryItem안에 있으므로 DiaryItem통해 보내줘야 한다.) -
filter
를 이용하여 제거할 리스트의 id인 targetId외의 요소들을 리스트로 만든다.
네번째[3](targetId = 3)목록에서 제거버튼을 누르면 targetId=4이외의 요소들로 리스트가 채워진다. -
data를 조작할수 있는 setData에 newDiaryList를 넣어주면 위의 목록들이 그대로 들어가므로 제거가 완료된다.
DiaryList
import DiaryItem from './DiaryItem';
const DiaryList = ({ onDelete, diaryList }) => {
console.log(diaryList);
return (
<div className="DiaryList">
<h2>일기 리스트</h2>
<h4>{diaryList.length}개의 일기가 있습니다.</h4>
<div>
{diaryList.map((it) => (
<DiaryItem key = {it.id} {...it} onDelete={onDelete} />
//DiaryItem에 onDelete를 전달한다.
))}
</div>
</div>
);
}
DiaryList.defaultProps = {
diaryList: [],
};
export default DiaryList;
DiaryItem
const DiaryItem = ({onDelete, author, content, created_date, emotion, id }) => {
return (
<div className='DiaryItem'>
<div className='info'>
<span>
작성자 : {author} | 감정점수 : {emotion}
</span>
<br />
<span className='date'>{new Date(created_date).toLocaleString()}</span>
</div>
<div className='content'>{content}</div>
<button //삭제하기 버튼
onClick={() => {
if(window.confirm(`${id}번째 일기를 삭제하시겠습니까?`)){
onDelete(id); //id를 받아서 onDelete의 매개변수로 사용한다.
}
}}
>
삭제하기
</button>
</div>
);
};
export default DiaryItem;
- DiaryItem에서는 onDelete()에 매개변수인 id를 넣어주어 실행한다.
Author And Source
이 문제에 관하여(데이터 삭제하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@minho100227/데이터-삭제하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)