[React 기본 일기장 만들기] 데이터 삭제하기

코드보기

 

 

 

앞서 만든 state 배열에서 데이터를 삭제하는 기능을 구현할 것이다.

 

우선 삭제하기 버튼을 리스트 컴포넌트인 Diary.item에 만든다.

 

그 다음 App.js에 Delete함수를 추가한다.

 

DiaryList도 위와 같이 수정한다. DiaryItem 컴포넌트를 호출 할 때 받은 onDelete를 추가한다.

 

이제 DiaryItem에서 삭제 버튼을 누르면 받은 함수가 호출되도록 한다.

onDelete props를 받고, 삭제 버튼에 onClick 함수를 만든다. 만약 삭제버튼이 눌리면 정말 삭제하시겠습니까 문구가 뜨는데 이때 window.confirm을 사용하면 화면 상단에 확인 취소 버튼이 뜬다. 이때 삭제를 누르면 onDelete함수가 실해된다.

 

이제 App.js에서 리스트에서 받은 id의 데이터를 삭제하는 코드를 작성한다.

data.filter을 사용해서 targetId와 같은 데이터를 제외한 배열을 새로 생성하고, setData를 이용해서 data state를 갱신한다.

 

이 과정을 완료하면

삭제하기 버튼 누름

이렇게 삭제하기 기능이 완성된다.

 

코드

 

App.js

import { useRef,useState } from 'react';
import './App.css';
import DiaryEditor from './DiaryEditor';
import DiaryList from './DiaryList';

// const dummyList = [
//   {
//     id : 1,
//     author : "잔디",
//     content : "안녕",
//     emotion : 5,
//     created_date : new Date().getTime(),
//   },
//   {
//     id : 2,
//     author : "풀",
//     content : "안녕하이",
//     emotion : 2,
//     created_date : new Date().getTime(),
//   },
//   {
//     id : 3,
//     author : "리액트",
//     content : "안녕안녕",
//     emotion : 1,
//     created_date : new Date().getTime(),
//   },
// ]


const 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보다 앞에 쓴다.

  };

  const onDelete = (targetId) => {
    const newDiaryList = data.filter((it) => it.id !== targetId);
    setData(newDiaryList);
  };
  

  return (
    <div className="App">
      <DiaryEditor onCreate = {onCreate}/>
      <DiaryList  diaryList = {data} onDelete = {onDelete}/>
    </div>
  );
}

export default App;

 

DiaryItem.js

const DiaryItem = ({
    onDelete,
    id,
    author,
    content,
    emotion,
    created_date
}) =>{
    return <div className="DiaryItem">
        <div className="info">
            <span> 작성자 : {author} | 감정점수 : {emotion}</span>
            <br></br>
            <span className="date">{new Date(created_date).toLocaleDateString()}</span>
        </div>
        <div className="content">{content}</div>
        <button 
        onClick={() =>{
            if(window.confirm(`${id}번째 일기를 정말 삭제하시겠습니까?`)){
                onDelete(id);
            }
        }}>
            삭제하기
            </button>
    </div>
}

export default DiaryItem;

 

DiaryList.js

import DiaryItem from './DiaryItem'

const DiaryList = ({onDelete,diaryList}) =>{
    
    return (<div className="DiaryList">
        <h2>일기 리스트</h2>
        <h4>{diaryList.length}개의 일기가 있습니다.</h4>
        <div>
            {diaryList.map((it) => (
               <DiaryItem key = {it.id} {...it} onDelete = {onDelete}/>
            ))}
        </div>
    </div>
    );
};

DiaryList.defaultProps = {
    diaryList : [],
};

export default DiaryList;

 

출처 : 한입크기로 잘라먹는 리액트