[ React ] React 기본 ③ React에서 배열 사용하기 - 3. 리스트 데이터 삭제하기

1. 리스트에 존재하는 데이터를 삭제하는 버튼을 각각의 아이템에 생성하기

 

리스트에 존재하는 데이터를 삭제해주기 위해서는 App 컴포넌트가 가지고 있는 일기 data state를 변경해줘야 한다.

 

각 아이템의 삭제하기 버튼을 누른다면 그 아이템이 사라진 배열로 업데이트를 시켜줘야한다. 

 

App 컴포넌트안에 삭제하기 버튼을 눌렀을 때 발생하는 이벤트인 onDelete 함수를 생성한다. onDelete 함수는

App 컴포넌트에서 직접 함수를 호출하는 것이 아니기 때문에 매개변수로 id를 전달받아 전달받은 id를 가진

아이템을 삭제하도록 한다.

 

우선 onDelete 함수를 DiaryList에 props로 내려준다. DiaryList에서는 부모로부터 전달받은 함수를 다시

DiaryItem에 또 내려준다. 즉 두 차례를 거치게 된다. DiaryList는 onDelete를 사용하진 않지만 DiaryItem에

전달해주기 위해서 prop로 전달받게 된다. 

 

<button onClick={()=>{
	if( window.confirm(`${id}번째 일기를 정말 삭제하시겠습니까?`)){
    	onDelete(id); // '예'일 경우 삭제 함수에 id를 전달해준다.
	};
}}>삭제하기</button>

 

window.confirm은 대화박스가 alert 처럼 나오게 된다. 반환은 true와 false이다.

 

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

 

onDelete 함수에는 전달받은 targetId를 제외한 새로운 배열을 만들고 setData()에 전달해서 data 배열을 변경해준다.

→ filter 함수를 이용해서 전달받은 id 요소를 제외한 나머지 요소들을 가지고 새로운 배열로 만들어줄 수 있다.

 

onDelete 함수가 결론적으로 수행이 되면서 data의 state를 변경하게 된다.

targetId를 포함하지 않은 배열을 추출해서 새로운 배열을 만들어 상태를 변화시킨다.

 

* filter : 배열 필터링 내장 함수

filter()는 전달된 콜백 함수가 true를 반환하는 모든 요소를 배열로 반환해준다. 

→ 객체 배열 중 조건에 일치하는 객체만 반환해준다. 

 

 

---

App.js

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

function App() {

      const [data, setData] = useState([]); 
      // data state는 일기 데이터 배열을 저장하기 때문에 배열로 초기값을 만들어준다.

      const dataId = useRef(0); // ID는 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) => {
      const newDirayList = data.filter((it)=> it.id !== targetId );
      setData(newDirayList);
    };

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

export default App;

 

DiaryList.js

import DiaryItem from "./DiaryItem";

const DiaryList = ({diaryList, onDelete}) => {
    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 = { //undefined 방지용으로 기본값 설정
    diaryList : []
};

export default DiaryList;

 

DiaryItem.js

const DiaryItem = ({author, content, emotion, created_date, id, onDelete}) => {
    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를 전달해준다.
                };
            }}>삭제하기</button>
            <br />
        </div>
    );

}

export default DiaryItem;