모달창에서 수량이 변경되면 체크박스에 적용하기
서론
대부분의 사이트는 장바구니에서 옵션은 몰라도 수량을 변경 가능한 경우가 많다. 하지만 우리는 '옵션/수량변경' 버튼을 누르면 모달창이 뜨고 거기서 옵션 및 수량을 변경하도록 제작을 해야했다.
그리고 모달창에서 수량을 0으로 변경하면 체크가 풀리는 것을 목표로 삼았다.
본론
모달창
이것이 '옵션/수량변경' 버튼을 누르면 등장하는 모달창이다. 여기서 옵션 및 수량에 변화를 줄 수 있다.
구현
1) 수량 state
const [quantity, setQuantity] = useState(item.qty);
수량 변화를 위해 useState를 만들었다
2) 버튼 이벤트
const onDecrease = () => {
if (quantity <= 0) {
setQuantity(0);
} else setQuantity(prev => prev - 1);
};
<button onClick={() => setQuantity(prev => prev + 1)} />
<button className="countDown" onClick={onDecrease} />
버튼을 누르면 수량이 변하게 이벤트를 작성했다. 0이하로는 감소가 안되게 설정했다.
3) 확인 및 적용
const onSubmit = id => {
const changeItem = items.map(item => {
if (item.id === id) {
if (quantity > 0) {
return { ...item, qty: quantity, is_check: true };
} else {
return { ...item, qty: quantity };
}
} else return item;
});
setItems(changeItem);
onClose();
};
<button onClick={() => onSubmit(item.id)}> 확인 </button>
확인 버튼을 누르면 옵션 및 수량이 변경된 사항을 기존 state에 적용되게 했다.
4) 변화 감지
useEffect(() => {
const checkedItems = items.map(item => {
if (item.qty === 0) {
return { ...item, is_check: false };
} else return { ...item };
});
setItems(checkedItems);
}, [item.qty]);
아이템 리스트가 보이는 곳에서 수량이 0일 경우에 체크박스가 풀리게 하기 위해 useEffect를 사용하였다.
결론(?)
이렇게 구현을 했지만 좀 더 생각해보니 옵션에서 수량을 0으로 가능하게 하는 것이 맞는지 의문이 들었다. 그리고 수량을 0으로 할 바에는 차라리 선택해서 아이템을 삭제하는 것이 더 맞다는 판단이 들었고 기존 코드에서 조금의 변화를 주었다.
결론(!)
1) 버튼 이벤트 수정
const onDecrease = () => {
if (quantity <= 1) { // 0에서 1로 바꿈
setQuantity(1); // 0에서 1로 바꿈
} else setQuantity(prev => prev - 1);
};
<button onClick={() => setQuantity(prev => prev + 1)} />
<button className="countDown" onClick={onDecrease} />
처음에는 음수가 안되게 설정해놓은 것을 최소값을 1로 변경했고 당연하게도 모달창에서 수량변경은 1까지 밖에 안된다.
변화 감지 삭제
구현사항 4번의 내용인 useEffect를 삭제하였다.
Author And Source
이 문제에 관하여(모달창에서 수량이 변경되면 체크박스에 적용하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hsuj86/Modal-qty0저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)