리스트 데이터 삭제하기

삭제 : 일기 data state의 배열에서 삭제할 id의 일기 데이터를 삭제하여 state를 업데이트하는 것.

// App.js
function App() {
  // 일기를 저장할 배열 data
  const [data, setData] = useState([]);
  const dataId = useRef(0);
...
  // 일기를 삭제하는 함수
  // 클릭한 리스트의 id를 제외한 새로운 data를 만들어서 setData로 업데이트 시킴
  // App컴퍼넌트에서 직접 onDelete 함수를 호출하는것이 아니기때문에, 매개변수로 targetId를 넘겨줌
  const onDelete = (targetId) => {
    console.log(targetId);
  };

  return (
    <div className="App">
      <DiaryEditor onCreate={onCreate} />
      {/* 삭제할 리스트의 id값을 onDelete에 전달하기 위해서는, DiaryItem에서 해당 정보를 전달해줘야함. 
      DiaryItem이 onDelete를 호출하게 하기 위해, DiaryItem의 부모인 DiaryList에 함수 전달 */}
      <DiaryList diaryList={data} onDelete={onDelete} />
    </div>
  );

props drilling : 두 계층 이상을 건너 props를 넘겨주는 것?

// DiaryList.js
const DiaryList = ({ diaryList, onDelete }) => {
  diaryList.map((lst) => {
    console.log(lst);
  });
  return (
    <div className="DiaryList">
      <h2>일기 리스트 ({diaryList.length})</h2>
      <div>
        {diaryList.map((lst, idx) => (
          // App컴포넌트로부터 prop으로 받은 onDelete함수를 다시 DiaryItem에 전달
          <DiaryItem key={lst.id} {...lst} onDelete={onDelete} />
        ))}
      </div>
    </div>
  );
};

// DiaryItem.js
const DiaryItem = ({
  author,
  content,
  emotion,
  created_date,
  id,
  onDelete,
}) => {
  return (
    <div className="diaryItem">
      <div className="info">
        <div className="dpInlnBlck w50p txtAlgnLft">
          작성자 : {author} | 감정 : {emotion}
        </div>
        {/* 시간 객체 생성 시, 아무것도 전달하지 않으면 현재 시간 기준 / 인자로 ms를 전달하면 ms가 가지고 있는 시간을 기준으로 Date객체 생성
        Date객체는 .toLocaleString 이라는 메소드 사용 가능 -> 사람이 알아볼 수 있는 시간으로 변경 */}
        <div className="date diaryTime dpInlnBlck w50p txtAlgnRght">
          작성시간 : {new Date(created_date).toLocaleString()}
        </div>
        <button
          className="diaryRemove"
          onClick={() => {
            if (window.confirm(`${id}번 째 일기를 삭제하시겠습니까?`)) {
              onDelete(id);
            }
          }}
        >
          삭제하기
        </button>
        <div className="diaryContent">{content}</div>
      </div>
    </div>
  );
};

export default DiaryItem;

• onDelete함수 생성

// App.js
// 일기를 삭제하는 함수
  // 클릭한 리스트의 id를 제외한 새로운 data를 만들어서 setData로 업데이트 시킴
  // App컴퍼넌트에서 직접 onDelete 함수를 호출하는것이 아니기때문에, 매개변수로 targetId를 넘겨줌
  const onDelete = (targetId) => {
    // targetId가 아닌 id들만 필터링해줌
    const newDiaryList = data.filter((it) => it.id !== targetId);
    console.log(newDiaryList);
    setData(newDiaryList);
  };

filter() : 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]