장바구니 페이지는 구매를 진행하거나 구매 가능성이 높은 제품을 모아두는 곳 이므로 기본적으로 많은 사이트들이 제품을 선택해놓은 경우가 많다. 해서 진행 중인 프로젝트에도 동일하게 적용하고자 했다.
어떤 방법이 있을지 고민하다가 받아오는 데이터에 기본 값을 설정해 두면 좋겠다는 생각을 했다.
{
"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를 만들어서 진행했다.
<td className="productCheck">
<input
type="checkbox"
name={item.name}
checked={item.is_check}
/>
</td>
데이터를 받아오고 prop으로 전달해서 checked 속성에 값을 박아버렸다.