React 리스트 데이터 삭제하기

삭제버튼 누를시 해당 일기 데이터를 삭제하는 기능 구현하면서, 배열의 데이터를 직접 삭제하는 방법

이전에 리스트에 data 추가한것 처럼 App컴포넌트가 가지고 있는 data state를 변경해줘야함.
예를 들어, 3개의 일기가 있으면, 2번째 일기의 삭제버튼을 누르면 2번째 일기는 제외하고, 1,3번 일기만 배열에 저장시켜 data state를 업데이트 시키면 됨

App.js

function App() {

    const [data, setData] = useState([]);

    const dataId = useRef(0);// 어떤 DOM도 선택하지 않고 0이란 값만 들어있음.

    const onCreate = (author, content, emotion) => {
        const create_date = new Date().getTime();
        const newItem = {
            author,
            content,
            emotion,
            create_date,
            id: dataId.current
        }
        dataId.current += 1; // newItem이 추가될때마다 0번 id는 1씩 증가해야함
        setData([newItem, ...data]) // 새로운 일기를 추가하면 제일 위로 올라와야하니까. newItem을 앞으로 설정
    }															// ...data는 data state의 객체 전부 펼치기

    // 삭제버튼 클릭시 해당 요소 id를 targetId로 전달받음
    const onRemove = (targetId) => {
        console.log(`${targetId}가 삭제되었습니다.`)
        // 원래있던 일기data.id와 삭제버튼을 누른id의 값이 같으면,
        // 그 값은 제외하고 새로운 배열을 만들어서 newDiaryList에 저장
        const newDiaryList = data.filter((data) => {
            return data.id !== targetId
        })
        setData(newDiaryList); // 삭제한 데이터 배열을 setData()에 상태를 변화시킴
    }

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

App컴포넌트에 onRemove()함수를 추가시켜 targetId를 파라미터로 받아줌, targetId는 어떤 아이디를 가진 요소를 삭제할건지 받아주는 애임.

DiaryItem.js

import { useState } from "react";

const DiaryItem = ({ onRemove, id, author, content, create_date, emotion }) => {

return (
	<div className='DiaryItem'>
		<div className='info'>
			<span className='author'>작성자 : {author}  <br />
				감정점수 : {emotion}</span>
			<br />
			<span className='date'>{new Date(create_date).toLocaleString()}</span>
		</div>

		<div className='content'>
			<p> {content} </p>

		</div>

		<button onClick={() => {
			if (window.confirm(`${id}번째 일기를 삭제하시겠습니까?`)) {
				onRemove(id); // 선택한 해당요소 id값을 전달
			}

		}}>삭제</button>
	</div>
)
}

App컴포넌트에 있는 onRemove()함수는 DiaryItem컴포넌트 에서 호출을 해야하기때문에 props로 전달해서 사용하고, '삭제버튼'을 클릭했을때, 해당 요소의 id값(2)을 onRemove(id);함수를 호출하여 id값(2)을 전달시킴.

App컴포넌트에선 onRemove()함수에서 targetId로 전달받은 id(2)를 받고 filter()를 사용해, 2번 id를 가진 배열 요소를 제외한 새로운 배열을 만들고 setData함수로 전달해서 data 배열을 바꿔주면됨.

정리 : onRemove()함수가 수행이 되면서, data state를 바꿈, 어떻게 바꾸냐면 전달받은 targetId는 삭제하고 남은 배열로만 해서 setData에 전달시켜 바꿔줌,

이 data 상태가 변했기 때문에 DiaryList컴포넌트가 다시 한번 렌더가 되면서 2번째 요소가 삭제되는걸 볼 수 있음.