table에서 rowSpan을 사용하고 싶어

시작

1차 프로젝트를 진행 중이다. 나는 장바구니 페이지를 맡기로 했다. 장바구니가 갑자기 끌렸고 재밌을 것 같았다. 그리고 많은 성장을 할 수 있을 것 같았다.

문제 발생

열심히 작업을 하고 있었는데 한가지 문제가 발생했다. 서버로부터 데이터를 받아와서 나열을 했는데 배송비 부분이 쓸데없이 반복되어서 출력이 된다는 것.

해결 과정

문제를 해결하기 위해서는 아이템 리스트 첫번째에 rowSpan이라는 속성을 활용해야했다. 그래서 사용한 것이 map함수에 인자인 index였다. index를 prop으로 넘기고 조건부 렌더링으로 문제를 해결했다.

<Cart.js>

<tbody className="productList">
	{items.map((item, idx) => (
		<CartList
			item={item}
            key={item.id}
            idx={idx} // index를 prop으로 넘겨준다
            items={items}
		/>
	))}
</tbody>

<CartList.js>

{idx === 0 && ( // 조건부 렌더링으로 하나만 출력
	<td className="productDelivery" rowSpan={shippingPrice.length}>
		<p>기본 배송비</p>
		<p>2,500원</p>
		<p>(택배-선결제)</p>
	</td>
)}

해결