React - mock data 활용해서 filter로 delete하기

• 2023.02.16(목) 1차 프로젝트 진행 중
  참고자료 | [React] 배열에 있는 데이터 삭제하기 (filter() 사용), GitBook-배열내장함수

---

🛒 장바구니 기능을 구현하는데 백엔드에서 장바구니 API가 아직 완성이 되지 않아서 장바구니 삭제 기능을 구현하지 못하고 있었다. 근데 문득, 현업에서 매번 API가 완성될 때까지 대기하다가 직접 통신을 하면서 코드를 수정하는 일은 없지 않나? 서로 각자 준비하다가 완료되면 딱 통신만 하고 거기서 수정을 시작해야하지 않나 하는 생각이 들어서 mock data를 활용해서 삭제 기능을 구현하는 코드를 짜보기로!

• filter함수를 이용해서 마치 삭제버튼 기능이 작동한 것처럼 setState를 관리할 수 있다는 정일님 얘기를 듣고 장바구니 API 기다리면서 연습 겸 구현해보기로 했다.

배열에 있는 데이터 삭제하기 (filter())

• filter()
  filter 함수는 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만들어준다.

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];

-> 여기서 todos.done이 false인 데이터만 filter()로 추출해내보자.

const taskNotDone = todos.filter(todo => todo.done === false);
console.log(taskNotDone); 
/* [
  {
    id: 4,
    text: '배열 내장 함수 배우기',
    done: false
  }
]; */

-> todo로 todos의 데이터를 전달 받아 done의 value값이 false인 게 true인 값만 taskNotDone에 담아준 것.

---

// Cart.js
const handleDelete = targetId => {
  const newCartList = cartList.filter(data => data.id !== targetId)
  setCartList(newCartList)
}
return (
  <CartList handleDelete={handleDelete} /> // CartList.js에 handleDelete함수를 handleDelete라는 이름을 가진 props로 전달
)

• 장바구니 삭제 기능을 구현하려면 삭제하려는 데이터를 제외한 나머지 데이터만 setState로 담아서 관리하면 되니까 조건식을 === 대신 !==로 관리하면 된다.

---

🚨문제상황

// 수정 전 CartList.js
<button onClick={handleDelete}>삭제하기</button>

🧐 근데 handleDelete함수를 button onClick으로 전달을 해줘도 targetId가 뭔지 모르니까 당연히 원하던대로 실행이 되지 않았다. 대체 어디서 targetId를 가져와서 전달을 해야하는 건지 감이 잡히지 않았고.. 어쨌든 targetId는 내가 삭제하고자 하는 상품의 id가 담겨야 하는 건데! 그걸 어떻게 인식 시키지?
-> handleDelete()에 인자로 담아서 전달하면 되지!

// 1차 수정 후 CartList.js
<button onClick={handleDelete(list.id)}>삭제하기</button>

😨 어 근데 이렇게 하니까 버튼을 누르지도 않았는데 화면 속 cartList 데이터가 전부 삭제 되었다. 왜지?
-> 하은님께 물어보니까 handleDelete()는 함수호출문이기 때문에 호출을 시켜버려서 onClick이라는 조건을 무시하고 무조건 호출이 되어버린다고 한다.

// 최종 수정 후 CartList.js
<button onClick={()=>handleDelete(list.id)}>삭제하기</button>

🥸 이렇게 함수로 전달을 해야 onClick을 제대로 인식한다. 증말 까다로운 녀석이로구나!

💬 아무튼 이렇게 list.id를 인자로 잘 전달을 해서 Cart.js에서 targetId로 잘 인식한다! 삭제 버튼 누르면 그것만 삭제되는데 넘 신기하고 재밌당 ㅎㅎㅎ 😽