실무 React 7. 장바구니 기능 완성하기

• 메인페이지 상품 클릭시 각각의 상세페이지로 이동
• 장바구니 +/- 버튼 기능
• Detail.js 장바구니 추가 버튼 클릭시 상품명 추가
• 이미 있는 상품을 장바구니 추가 누를시 수량만 증가시키기

Compo 컴포넌트 정의한곳의 div에 직접 onClick을 달아줘야함

(App.js)
function Card(props){
  let history = useHistory();
  return (
    <div className="col-md-4" onClick={ ()=>{ history.push('/detail/'+props.shoes.id) } }>
      <어쩌구저쩌구/>
    </div>
  )
}

2. 장바구니 +/- 버튼 기능 완성

redux를 사용하고 있다면 데이터 수정기능은 reducer에서 고치면 된다.

(Cart.js 안의 +/- button 있던 곳) 

<button onClick={()=>{ props.dispatch( {type: '수량증가', 데이터 : a.id} ) }}> + </button> 

(index.js)

let 초기값 = [ 
  {id : 0, name '멋진신발', quan : 2},
  {id : 1, name '멋진신발2', quan : 1},
];

function reducer(state = 초기값, 액션){
  if (액션.type === '수량증가') {
    let copy = [...state];
    copy[액션.데이터].quan++; // 액션은 위의 Cart.js의  {type: '수량증가', 데이터 : a.id} 
    return copy
  } 
  (이하 나머지 if문들)
}

3. 주문하기 버튼 클릭시 해당페이지의 상품을 장바구니에 추가하기

<button onClick={ 

    props.dispatch( {type : '항목추가', 데이터 : {id: 찾은상품.id, name : 찾은상품.title, quan : 1}} ); 

}>주문하기</button> 

여기서 끝내면 디테일 페이지에서 주문하기 버튼을 누를때마다 아래처럼 나옴

위 문제를 해결하기 위해 해당 이름이 있나? 또는 해당 번호가 있나? 확인 후 있다면 수량만 증가 없다면 밑으로 상품 추가 해주면 될것이다.
if else if else의 반복

function reducer(state = 초기값, 액션){
  if(액션.type === '항목추가'){
     let found = state.findIndex((a) => return (a.name) === (액션.데이터.name));
    // 같은 이름이 있나 확인
     if(found >= 0){
       let copy = [...state];
       copy[].quan++;
       return copy;
     } else {
        let copy = [...state];
        copy.push(액션.데이터);
        return copy
     }
  } else if (액션.type === '수량증가') {
      let copy = [...state] // 객체나 오브젝트는 깊은복사본을 만들어서 수정한다
      copy[액션.데이터].quan++; // 액션.idx를 해야 어떤 버튼을 눌렀나 알 수있다.
      console.log(copy);
      return copy
  } else if (액션.type === '수량감소') {
      let copy2 = [...state]
      copy2[액션.데이터].quan > 0 ? copy2[액션.데이터].quan-- : copy2[액션.데이터].quan = 0
      console.log(copy2);
      return copy2
  } else {
  	return state // reducer는 항상 state데이터를 뱉어내야함
  }
  

주문하기 버튼 옆에 수량을 직접 입력할 수 있는 input 기능 추가
상품의 사이즈 정보 선택할수 있게.
장바구니 항목 삭제기능추가