[React] redux로 장바구니 삭제 기능, 중복 상품 담기 금지 기능 만들기

안녕하세요? 거의 한달만에 싸지르는 글이네요 ㅎㅎ

제가 최근에 공부한 기능들 중 저에게 시련을 줬었던 장바구니 기능에 대해 정리해 보려고 합니다.

 

어떻게 생각해보면 쉬운 거 같은데.. 많이 생각해 볼수록 절대 풀리지 않더라구요 ㅠㅠ 구글링과 저의 멘토의 도움을 통해 결국은 풀어냈습니다.

 

● 장바구니 삭제 기능 만들기

cart.js

항목 삭제하기 버튼을 누르면 항목 리스트가 삭제되는 기능을 만들면 된다.

나는 redux의 reducer로  state 변경함수를 이용하여 만들었다.

 

1. reducer에 state 변경함수를 생성한다.

state 변경함수는 삭제 버튼의 onClick 이벤트로 호출된다. 삭제버튼을 클릭 하면 리스트의 id값을 넘겨줘서, id가 똑같은 리스트는 제외하고 나머지 리스트들을 return 해주는 원리이다.

 

>> 여기선 filter() 함수를 이용해서 조건에 맞는 리스트를 반환해주면 된다.

filter는 조건에 맞는 배열!을 return 해준다.

let list = createSlice({
    name: 'list',
    initialState:[
    	{ id: 1, name: 'Grey Yordan', count: 100 },
    	{ id: 0, name: 'White and Black', count: 2 },
    ],
    reducers: {
    	setRemove(state, action){
        	return state.filter((a)=>{ 
            	     return a.id != action.payload; // 삭제 버튼을 누른 리스트의 아이디를 제외한 나머지로 배열을 새로 구성함
                 }); 
        }
    }
})

삭제버튼을 누르면 id값을 넘겨받고, 삭제할 항목의 id값을 filter로 찾아서 그 값을 제외한(!=) 배열을 return 해준다.

 

2. 버튼에 onClcik 이벤트를 걸어준다.

<button onClick={()=>{ dispatch(setRemove(v.id)) }}>삭제</button>

여기서 v는 map으로 생성해놓은 배열값이다.

[

    { id: 1, name: 'Grey Yordan', count: 100 },

    { id: 0, name: 'White and Black', count: 2 }

]

 

결과로, 삭제버튼을 누르면 리스트가 사라진다.

 

 

● 장바구니에 중복으로 아이템 담지 못 하는 기능 만들기

장바구니에 상품을 담았는데, 이미 담긴 상품이면 리스트에 또 넣을 필요가 없겠죠?

원리는 쉽게 생각해서, 담을 상품의 아이디가 이미 리스트에 있다면 상품을 넣지 않으면 됩니다.

 

그러면, 담을 상품이 이미 상품목록에 있다면 추가하지 않고, 상품목록에 없다면 추가하는 원리이기 때문에 조건문을 쓰는 것이 핵심입니다.

 

1. reducer에 state 변경함수 작성하기

let list = createSlice({
    name: 'list',
    initialState:[
    	{ id: 1, name: 'Grey Yordan', count: 100 },
    	{ id: 0, name: 'White and Black', count: 2 },
    ],
    reducers: {
         setRemove(state, action){
             return state.filter((a)=>{ 
                 return a.id != action.payload; // 삭제 버튼을 누른 리스트의 아이디를 제외한 나머지로 배열을 새로 구성함
             }); 
         },
         
         setList(state, action){
         	const itemNum = state.find((a)=>{ 
            	return action.payload.id === a.id; //action.payload로 상품 오브젝트 하나를 받아옴
            }) 
            
            if (itemNum === undefined){
            	return alert('상품이 담겼습니다'), state.concat(action.payload);
            }else{
            	alert('이미 담긴 상품입니다');
            }
         }
    }
})

 

2. onClick 이벤트 걸어주기

// 상품 오브젝트를 넘겨줌.
<button onClick={()=>{ dispatch(setList(props.shoes[id]) }}>상품 담기</button>

/*
let shoes= [
  {
    id: 0,
    title: 'White and Black',
    name: 'White and Black',
    content: 'Born in France',
    price: 120000,
    count: 1,
  },

  {
    id: 1,
    title: 'Red Knit',
    content: 'Born in Seoul',
    price: 110000,
  },

  {
    id: 2,
    title: 'Grey Yordan',
    content: 'Born in the States',
    price: 130000,
    name: 'Grey Yordan',
    count: 3,
  },
];
*/

 

** 주소를 쳐서 페이지를 이동하게 되면 페이지가 새로고침 돼서 리스트에 담아도 사라지기 때문에 장바구니로 바로 이동하는 버튼을 만들어서 상품이 잘 담겼는지 확인해야 한다.