Today I learn..."기억하고 싶은 1차 프로젝트 코드"

가장 기억에 남는 코드

이번 프로젝트에서 가장 기억에 남는 코드는 장바구니에서 선택 된 아이템을 삭제하는 코드이다.

  selectDelete = () => {
    const { cartData, selectedArr } = this.state;
    const checkedArr = [];
    const deletedArr = [];
    const deletedId = [];
    let idx = selectedArr.indexOf(true);
    while (idx !== -1) {
      checkedArr.push(idx);
      idx = selectedArr.indexOf(true, idx + 1);
    }
    const newCheckedArr = cartData.filter((cartItem, index) => {
      const condition = !checkedArr.includes(index);
      if (!condition) deletedArr.push(cartItem);
      return condition;
    });
    deletedArr.map(el => {
      deletedId.push(el.id);
    });
    this.deleteCart(deletedId).then(response => {
      if (response.status !== 204)
        return alert(`삭제에 실패했습니다. 에러코드 : ${response.status}`);
      return this.setState({
        cartData: newCheckedArr,
        selectedArr: Array(newCheckedArr.length).fill(false),
      });
    });
  };

한부분 한부분씩 떼서 설명 하기 전에, 사전에 선택을 하는 방식은 하나의 리스트 안에 각각의 인덱스에 맞는 값을 true 혹은 false로 저장 하고, 거기에 맞춰서 아이템을 삭제하는 방식이다.

예를 들어 아이템이 3개가 있고 2번째 아이템만 선택이 되었다면, 이를 나타내는 state는 [false,true,false]가 되는 형식이다.
이를 위해 selectedArr: Array(newCheckedArr.length).fill(false),에서 데이터의 갯수에 맞게 배열을 만들고, 그 값을 false로 초기화 하였다.

첫번째로,

let idx = selectedArr.indexOf(true);
    while (idx !== -1) {
      checkedArr.push(idx);
      idx = selectedArr.indexOf(true, idx + 1);
    }

이 코드는 내가 원하는 selectedArr에서 true의 값이 어느 인덱스에 있는지를 찾는 코드이다.

여기에 들어가는 idx는 값이 true인 아이템의 인덱스만을 찾기에, 어느 인덱스에 있는 아이템이 체크(true)되었는지 알 수 있다.

이 인덱스를 checkedArr에 넣고,

const newCheckedArr = cartData.filter((cartItem, index) => {
      const condition = !checkedArr.includes(index);
      if (!condition) deletedArr.push(cartItem);
      return condition;
    });

에서 checkedArr에 포함 되어 있지 않는, 즉 선택 되지 않은(false) 아이템만을 배열로 해서 리턴 시킨다.

만약 이를 만족 하지 못한다면, 즉 선택된(true)요소는 view에서 사라지고, 아이템은 deletedArr로 이동한다.

    deletedArr.map(el => {
      deletedId.push(el.id);
    });

이 부분은 백엔드와의 소통의 결과물인데, 원래는 삭제한 아이템 전체를 백엔드에 보냈지만, 백엔드 팀원과의 대화 후, 해당 아이템의 id만 보내기로 합의가 되었다.
그때문에 하나의 배열을 만들고, 거기에 deletedArr에 map을 사용, id만을 추출해서

this.deleteCart(deletedId).then(response => {
      if (response.status !== 204)
        return alert(`삭제에 실패했습니다. 에러코드 : ${response.status}`);
      return this.setState({
        cartData: newCheckedArr,
        selectedArr: Array(newCheckedArr.length).fill(false),
      });

백엔드에 보내는 로직으로 이어진다.

deleteCart는

  deleteCart = payload => {
    return fetch(`${GET_CART_LIST}`, {
      method: 'DELETE',
      headers: {
        Authorization: `${LOGIN_TOKEN}`,
      },
      body: JSON.stringify(payload),
    });
  };

이와 같은 함수로, 선택 삭제뿐만 아니라 개별 삭제에도 사용 되는 함수라서, 함수의 재사용을 위해 따로 빼두었다.