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),
});
};
이와 같은 함수로, 선택 삭제뿐만 아니라 개별 삭제에도 사용 되는 함수라서, 함수의 재사용을 위해 따로 빼두었다.
Author And Source
이 문제에 관하여(Today I learn..."기억하고 싶은 1차 프로젝트 코드"), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@mong-byte/Today-I-learn...기억하고-싶은-1차-프로젝트-코드저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)