redux 장바구니 삭제기능 질문입니다

[최솔]

여러개의 상품을 나열하고 각각 삭제버튼을 누르면 하나씩 지워지게 하고 싶은데 어떤 방법을 써야할까요 ?

class 말고 function에서 쓸때가 궁금해요 !

[codingapple]

프로젝트에서 장바구니 기능 만든거에서 말하는 것 맞죠?

0번상품 삭제버튼을 누르면 장바구니데이터보관한 state에서 id가 0번인 항목을 삭제하도록 버튼에 기능개발하면 됩니다 

state가 리덕스에 있으면 리듀서에 상품삭제하는기능 개발해두시고 버튼누르면 dispatch하면 되겠습니다

 

[최솔]

네네 장바구니요 !

아이디가 0번인 항목을 삭제하게할때 사용되는 함수같은게 있을까요 ?

그게 dispatch라는 말씀이신가용 ?

[codingapple]

자바스크립트로 해결해야합니다 

장바구니state array 데이터에 반복문을 돌려서 하나씩 출력해봅니다 

그 출력해본 것 중에 id가 0이면 그 데이터를 삭제합니다 splice 이런거 쓰면 array 중간에 있는데이터 삭제가능합니다 

 

아니면 filter함수로 id가 0이 아닌것만 걸러서 새로운 array만들어주세요 이렇게해도될듯요

 

[최솔]

function Cart(props) {

const [deleteProduct, setDeleteProduct] = useState(props.product);

function Remove() {
return(
<div>
{
setDeleteProduct(props.product.filter(num => num !== props.i))
}
</div>
)
};

return (

<button onClick={() => Remove}> 삭제 </button>

)
}

 

이렇게 Remove 함수를 써서 배열에 리스트 지우고 싶은데 실행이 안돼요 ..

[codingapple]

1. 함수 만들 때는 다른 함수 밖에다가 만드는게 좋습니다 

2. 버튼누르면 함수실행하고 싶으면 onClick={()=>{  함수명() }} 이렇게 사용하는게 좋습니다 

 

 

function Cart(props) {
  const [deleteProduct, setDeleteProduct] = useState(props.product);
  return (
  <button onClick={() => {
    var 필터한거 = props.product.filter(num => num !== 지금누른버튼의상품번호);
    setDeleteProduct(필터한거);
  }}> 삭제 
  )
}

 

일단 deleteProduct에 모든 상품이 들어있다고 치고 

삭제버튼을 누르면 그 버튼과 관련된 상품만 빼고 다른 상품들만 남기고 싶은것이겠죠?

그럼 아마도 이렇게 되어야하지 않을까요 

 

3. 근데 Cart 하위컴포넌트에서 복잡하게 state를 하나 더 만들지 말고 어딘가에 product라는 이름의 state에 이미 상품들이 담겨있는 것 같은데 그걸 수정하는 것도 좋아보입니다 

 

 

[최솔]

감사합니다 ㅜㅜㅜㅜ ..

최고에요 교수님보다 좋아요 감사합니당 🙂

[최솔]

처음에는 화면 중간에 위치해있다가, 스크롤을 움직여서 상단으로 이동되었을 때 , 상단위치에 고정되게 하는 방법도 있나요 ?

[codingapple]

무엇이 상단에 고정되는 것입니까 

공중에 떠있는 <div> 가 상단에 고정되게 만드는건 CSS중에 position : fixed 를 사용합니다 

스크롤바 위치를 계속 수집하다가 스크롤바가 맨 위로 올라갔을 때 position fixed를 주면 되겠군요 

[글쓴이]

글