1. 알아야 할 내용

---

• deleteMessag 함수의 버튼에서 클릭한(선택한) id값과 다른 data들로만 새로운 배열을 만들어서 state 값을 변경한다.

• 선택한 id의 데이터를 제외한 배열을 렌더링 하는 것은, 선택한 id의 데이터 삭제의 개념과 같다.

• 아래의 () => deleteMessage(value.id) 부분에서 deleteMessage 함수를 전달할 때 value.id를 인자로 받고 있다. deleteMessage(value.id)로 전달하게 되면 JSX 문법에 따라 함수의 형태로 이벤트 핸들러를 전달해야 되는 규칙에 어긋나 undefined를 전달하는 것과 같게 되어 Error가 발생한다. 따라서 화살표 함수로 감싸서 함수의 형태로 전달해주어야 한다.

<button onClick={() => deleteMessage(value.id)}>

2.전체 코드

---

// App.js
import React from 'react';
import './App.css'
import dummyData from './dummyData'
import { useState } from 'react';

function App() {
  const [data, setData] = useState(dummyData);
  const [message, setMessage] = useState('');

  // 데이터 추가
  const addMessage = () => {
    const newMessage = {
      id: data.length + 1,
      text: message,
    };
    // 기존의 데이터에 새로 입력한 데이터를 상단에 추가
    setData([newMessage, ...data]);
    // 데이터를 추가한 후 입력창 비우기
    return setMessage('');
  };

  // 데이터 삭제
  const deleteMessage = (deleteId) => {
    // deleteMessag 함수의 버튼에서 클릭한(선택한) id값과 다른 data들만 새로운 배열로 처리해서 state 값을 변경한다.
    setData(data.filter((value) => value.id !== deleteId));
  }

  const handleChangeMessage = (event) => {
    setMessage(event.target.value)
  };

  return (
    <div className='inputContainer'>
      <input type='text' value={message} onChange={handleChangeMessage} />
      <button onClick={addMessage}>추가</button>
      <ul>
        {data.map((value) =>
          <li key={value.id}>
            {value.text}
            <button onClick={() => deleteMessage(value.id)}>삭제</button>
          </li>
        )}
      </ul>
    </div>
  );
}

export default App;

//dummyData.js
const dummyData = [
    {
        id: 1,
        text: 'Hello',
    },
    {
        id: 2,
        text: 'World',
    },
];

export default dummyData;