[React] 데이터 삭제하기 (일기장 만들기 5탄)

 

코드가 1탄부터 이어지기 때문에 1탄부터 보고 오셔야 합니다~!

 

 1탄 

https://dev-ini.tistory.com/73

[React] useState로 사용자의 입력 처리하기: input, button에 이벤트 달기 (일기장 만들기 1탄)

 

 

 2탄 

https://dev-ini.tistory.com/75

[React] useRef로 DOM 조작하기 (일기장 만들기 2탄)

 

 

 3탄 

https://dev-ini.tistory.com/77

[React] 데이터 리스트 렌더링 (조회) (일기장 만들기 3탄)

 

 

 4탄 

https://dev-ini.tistory.com/76

[React] 데이터 추가하기, 배열 리스트 만들고 추가하기 (일기장 만들기 4탄)

 

 

---

 

 삭제하기 버튼 만들기 

 

 DiaryItem.jsx 

const DiaryItem = ({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={()=>{ // 삭제하기 버튼 만들기
        console.log(id); // 버튼 누르면 해당 id가 console에 뜸
      }}>
        삭제하기</button>
    </div>
  );
};

export default DiaryItem;

 

 

(1) App.js에서 onDelete 함수를 정의함 → 직접 App.js에서 함수 호출하는게 아니기 때문에 어떤 id를 갖고있는 요소를 원하는지 매개변수로 전달 (호출은 DiaryItem에서 해야함)

(2) App.js에서 DiaryItem의 부모인 DiaryList로 props로 onDelete함수를 내려줌 

(3) DiaryList에서 props받아서 DiaryItem한테 내려줘야함

(4) DiartItem에서 onDelete함수를 props로 받음 

(5) 삭제하기 버튼 누를 시 alert창 나오게 하기

 

 

 

 App.js 

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


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]); 
  }

  const onDelete = (targetId) =>{ // (1) onDelete함수를 정의함
  console.log(`${targetId}가 삭제되었습니다.`);
  }

return (
    <div className="App">
<DiaryEditor onCreate={onCreate}/>
<DiaryList onDelete={onDelete} diaryList={data} />  //(2) DiaryItem의 부모인 DiaryList로 props로 onDelete함수를 내려줌 
    </div>
  );
};

export default App;

 

 

 DiartList.jsx 

import DiaryItem from './DiaryItem';

const DiaryList = ({ onDelete, diaryList })=> { // (3) props받아서 
  return (
  <div className="DiaryList">
    <h2>일기 리스트</h2>
    <h4>{diaryList.length}개의 일기가 있습니다.</h4>
  <div>
    {diaryList.map((it)=>
    ( 
      <DiaryItem key={it.id} {...it} onDelete={onDelete}/> // (3) DiaryItem한테 내려줘야함

  ))}
  </div>
  
  </div>
  );
}


DiaryList.defaultProps={
diaryList:[] 
}

export default DiaryList;

 

 

 DiartItem.jsx 

const DiaryItem = ({ onDelete, author, content, created_date, emotion, id}) => {
// (4) onDelete함수를 props로 받음 

  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={()=>{
        console.log(id); 
        if(window.confirm(`${id}번째 일기를 정말 삭제하시겠습니까?`)){  // (5) 삭제하기 버튼 누를 시 alert창 나오게 하기
          onDelete(id);
        }
      }}>
        삭제하기</button>
    </div>
  );
};

export default DiaryItem;

 

 

 

 새로운 배열로 만들기 

 

targetId를 가진 배열 요소를 제외한 새로운 배열을 만들어서 setData함수에 전달해서 데이터 배열을 바꿔주기

 

 

filter함수를 사용해서 targetId가 아닌 것만 남겨둔다.

 App.js 

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


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]); 
  }

  const onDelete = (targetId) =>{
  console.log(`${targetId}가 삭제되었습니다.`);
  const newDiaryList = data.filter((it)=>it.id !== targetId); // filter함수를 사용해서 targetId가 아닌 것만 남겨둠
  console.log(newDiaryList);
  }

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

export default App;

 

 

 

여기서 짱아꺼를 삭제버튼 눌러본다.

 

 

짱아를 제외한 새로운 배열이 뜬다.

 

 

newDiaryList를 setData를 전달만 해주면 삭제가 된다. 

 App.js 

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


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]); 
  }

  const onDelete = (targetId) =>{
  console.log(`${targetId}가 삭제되었습니다.`);
  const newDiaryList = data.filter((it)=>it.id !== targetId);
  setData(newDiaryList); // setData에 전달

  }

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

export default App;

 

 

---

 

 

 완성본