장바구니 아이템은 이미 체크!

서론

장바구니 페이지는 구매를 진행하거나 구매 가능성이 높은 제품을 모아두는 곳 이므로 기본적으로 많은 사이트들이 제품을 선택해놓은 경우가 많다. 해서 진행 중인 프로젝트에도 동일하게 적용하고자 했다.

본론

어떤 방법이 있을지 고민하다가 받아오는 데이터에 기본 값을 설정해 두면 좋겠다는 생각을 했다.

data.json(Mock Data)

{
    "id": 2,
    "name": "샌드백",
    "shipping": "2500",
    "price": 35000,
    "is_green": false,
    "is_sale": false,
    "category_id": 3,
    "stock": null,
    "discount_price": 35000,
    "discount_rate": 0,
    "option": "large",
    "qty": 1,
    "is_check": true // 기본으로 설정
  },
  {
    "id": 3,
    "name": "투명망토",
    "shipping": "2500",
    "price": 23000,
    "is_green": false,
    "is_sale": false,
    "category_id": 3,
    "stock": null,
    "discount_price": 23000,
    "discount_rate": 0,
    "option": "medium",
    "qty": 4,
    "is_check": true // 기본으로 설정
  },

서버에서 데이터를 받기 전 테스트를 위해 위에 보이는 Mock Data를 만들어서 진행했다.

CartList.js

<td className="productCheck">
	<input 
		type="checkbox"
		name={item.name}
		checked={item.is_check}
	/>
</td>

데이터를 받아오고 prop으로 전달해서 checked 속성에 값을 박아버렸다.

결과