[JSP, JSTL] forEach문으로 만든 테이블 병합하기 (varStatus="status"속성)

쇼핑몰 프로젝트에서 장바구니를 만들 때 JSP를 사용하고 있다. 서버로부터 cartList를가져와서 테이블로 구현하고 있다. 이 때, 배송비는 주문 1번당 부과되므로 배송비 영역이 병합(merge)되도록 하려한다.

 

위와 같이 배송비 영역의 td를 통합하고자 하는 것이다.

 

 

1. 테이블 코드

<!-- 주문 목록 -->

            <div class="cart-item-wrapper" >

                <div class="cart-table-container" >

                    <table id="cart-item-table">

                        <thead>

                            <th> <input type="checkbox"></th>

                            <th>상품정보</th>

                            <th>수량</th>

                            <th>주문금액</th>

                            <th>배송비</th>

                        </thead>

                        <tbody>

                            <c:choose>

                                <c:when test="${not empty cartList}">

                                <!-- 상품이 있다면 -->

                                <!-- 향상된 for문처럼 사용 -->

                                <c:forEach var="cart" items="${cartList}" varStatus="status">

                                    <tr style="justify-content: center;" id="${cart.cartId}">

                                        <td> <input type="checkbox"></td>

                                        <td>

                                            <div class="cart-item-detail">

                                                <div class="cart-item-img">

                                                    <img src="${contextPath}/${cart.productImage}" style="width: 80px;" alt="">

                                                </div>

                                                <div class="cart-item-info">

                                                    <div class="cart-item-name">${cart.productName}</div>

                                                    <div class="cart-item-option">Option : ${cart.cartOption}</div>

                                                    <div class="cart-item-unit-price">${cart.productPrice}원</div>  

                                                </div>

                                            </div>

                                        </td>

                                        <td>

                                            <div class="cart-item-qty">

                                                <div class="qty-container">

                                                    <button class="qtybtn minus-btn" type="button">-</button>

                                                    <input class="qty" autocapitalize="none" type="text" inputmode="numeric" value="${cart.quantity}">

                                                    <button class="qtybtn plus-btn" type="button">+</button>

                                                </div>

                                            </div>

                                        </td>

                                        <td>

                                            <div><span class="cart-item-price">${cart.productPrice}</span>원</div>

                                        </td>

                                        <c:if test="${status.first}">

                                            <td rowspan="${cartList.size()}">3,000원</td>

                                        </c:if>

                                    </tr>

                                </c:forEach>

                                </c:when>

                                <c:otherwise>

                                    <tr>

                                    <!-- 상품이 없다면 -->

                                    <td colspan="5">장바구니에 상품이 존재하지 않습니다.</td>

                                    </tr>

                                </c:otherwise>

                            </c:choose>

                        </tbody>

                           

                    </table>

                </div>

               

            </div>

 

• JSTL <c:forEach>문을 통해 <tr>태그가 반복되며 서버로부터 받아온 정보가 출력된다.
• 이 때 <tr>은 서버에 저장된 정보로 그 수가 동적으로 정해지므로 rowspan을 사용해서 컬럼을 병합할 때 varStatus="status"가 필요하다. rowspan을 이용하여 병합할 때는 병합하는 첫번째 <td>에서 속성값을 줘야하는데 해당 td가 첫번째인지를 알아보기 위해서는 status.first를 사용해야한다.
•  <c:if test="${status.first}"> 조건을 통해 첫번째 <tr>에서 병합이 일어나도록 한다.
• 병합될 rowspan은  <td rowspan="${cartList.size()}">을 통해 동적으로 정하도록 한다.

 

 

2. varStatus="status"속성

• `varStatus="status"`는 JSTL `<c:forEach>` 태그에서 사용되는 변수 상태 객체를 정의하는 데 사용한다.
• `varStatus` 속성을 사용하여 해당 반복문의 상태 정보에 접근할 수 있다.
• `varStatus` 속성을 설정하면 JSTL은 반복문의 상태를 나타내는 객체를 생성하고, 이를 `varStatus`에 지정한 이름으로 사용할 수 있다. 일반적으로 `varStatus` 값을 "status"로 설정하여 상태 객체를 참조한다.
• `status` 객체에는 여러 가지 유용한 속성이 포함되어 있는데 몇 가지 주요 속성은 다음과 같다.
  
  - `index`: 현재 반복의 인덱스(0부터 시작)
  - `count`: 현재까지의 반복 횟수. 1부터 시작하여 증.
  - `first`: 현재 반복이 첫 번째 반복인지 여부. `true` 또는 `false` 
  - `last`: 현재 반복이 마지막 반복인지 여부, `true` 또는 `false` 
  
  따라서 `varStatus="status"`를 사용하면 `status` 객체를 통해 반복문의 현재 상태에 접근할 수 있으며, 이를 활용하여 필요한 로직을 구현할 수 있다. 위처럼 `status.first` 속성을 사용하여 첫 번째 반복인 경우에만 특정 동작을 수행하도록 조건을 지정할 수 있다.