리액트 노드 찜목록 구현

  let [list, setList] = useState([])
  const [checkBtn, setCheckBtn] = useState(false)


  const userInfo = getUser() ? getUser() : '';
  useEffect(() => {
    axios({
      method: 'get',
      url: `http://localhost:8000/wishList/${userInfo.uid}`
    })
      .then(res => {
        res.data = res.data.map(v => ({ ...v, 'check': false }))
        setList(res.data)
      })
      .catch((err) => { console.log(err) });
  }, []);

노드에서 data를 받아오는데 체크버튼으로 삭제를 하기위해 데이터에 check value와 boolean 타입의 key값을 넣음

const [checkBtn, setCheckBtn] = useState(false) 이건 전체 선택 버튼을 위해 생성

이런 데이터를 받음

<div className="wishList">
      <h2>찜<span>{list.length}</span></h2>
      <div className="sortBtn">
        <div className="checkControll">
          <p className={`check ${checkBtn ? 'on' : ''}`} onClick={onClickAllCheck} ></p>
          <button type="button" className="deleteWish" onClick={deleteWishBtn}>선택삭제</button>
        </div>
      </div>

    </div>

onClickAllCheck 클릭 이벤트 시 마다 전체 배열의 check value가 토글되게 생성

 const onClickAllCheck = (e) => {
    checkBtn ? list = list.map(item => ({ ...item, check: false })) : list = list.map(item => ({ ...item, check: true }))
    setCheckBtn(!checkBtn)
    setList(list)

  }

그리고 찜목록 리스트

      <ul>
        {
          list.map(v =>
            <li>
              <Link to={`/productDetail/${v.pid}`}>
                <ProductList image={v.productImage} place={v.place} name={v.productName} price={v.price} date={formatRelativeDate(v.productRegDate)} />
              </Link>
              <p className={`check ${v.check ? 'on' : ''}`} data-num={v.bid} onClick={clickCheck}></p>

            </li>)
        }
      </ul>

각 체크 버튼을 누르면 clickCheck 이벤트로 해당 bid에 해당하는 데이터열 의 check의 value를 토글

  const clickCheck = (e) => {
    setCheckBtn(false)
    let target = e.target.dataset.num
    list = list.map(v => {
      if (parseInt(v.bid) === parseInt(target)) {
        return ({ ...v, check: !v.check })
      } else {
        return v; // 조건이 false일 때 기존 객체 반환
      }
    })
    setList(list)
  }

그리고 삭제버튼을 누르면 check의 boolean값이 true인 bid와 userid를 노드로 전송

  const deleteWishBtn = (e) => {
    let checkList = list.filter(v => v.check).map(key => key.bid)
    const result = window.confirm('삭제하시겠습니까?');

    if (result) {
      axios({
        method: 'post',
        url: `http://localhost:8000/wishList/${userInfo.uid}`,
        data: checkList
      })
        .then(res => {
          window.location.reload();
        })
        .catch((err) => { console.log(err) });
    }

  }

export async function removeList(req, res) {
  let { uid } = req.params;
  const results = [];

  try {
    for (let bid of req.body) {
      let success = await wishRepository.orderList(uid,bid);
      results.push(success)
    };
  } catch (error) {
    console.error(error);
  }
  res.json(results);

}

export async function orderList(uid,bid) {
      const sql = `              
                  DELETE FROM wishList
                  WHERE uid = ? AND bid = ?;
              `

      return db
            .execute(sql, [uid,bid])
            .then((result) => result[0])
}

후 MySql에서 삭제 하면 끝 ~