[JSP] EL 연산자와 JSTL

EL(Expression Language)

EL은 JSP에서 사용되는 스크립트 언어로 JSP에서 데이터를 출력하고 조작하는 데 사용된다.

 

 

EL의 연산자

EL에서는 산술연산, 비교연산, 논리연산, 삼항연산이 가능하다

 

✅ 산술연산

JAVA와는 다르게 문자열도 숫자처럼 계산이 가능하다

<h3>산술연산 : + , - . * , /, %</h3>
<p>${5 + 3}</p>
<p>${7 - 3}</p>
<p>${8 * 3}</p>
<p>${6 / 2}</p>
<p>${7 / 2}</p>
<%--3.5--%>

<%--키워드 연산자--%>
<p>${7 div 2}</p>
<p>${7 % 2}</p>
<p>${15 mod 4}</p>

<%--문자열 사용 가능--%>
<p>${"3" + "4"}</p>
<p>${num1} + ${num2} = ${num1 + num2}</p>

 

✅ 비교연산

<h3>비교연산 > , < , >=, <=, ==</h3>
<p>${5 > 3}</p>
<p>${5 gt 3}</p>

<p>${5 < 3}</p>
<p>${5 lt 3}</p>

<p>${5 >= 3}</p>
<p>${5 ge 3}</p>

<p>${5 <= 3}</p>
<p>${5 le 3}</p>

<p>${5 == 3}</p>
<p>${5 eq 3}</p>

<p>${"hello" < "spring"}</p>
<%--true : 아스키 코드 사용해서 비교--%>

<p>${"hello" < "Spring"}</p>
<%--false--%>

<p>${"11" < "2"}</p>
<%--true--%>

<p>${"11" < 2}</p>
<%--false--%>
<%--숫자와 문자열을 비교하면 둘 다 숫자가 되어서 비교--%>
<%--<p>${11 < "two"} 오류 </p>--%>

 

✅ 논리연산

 

<h3>논리연산 &&, ||, !</h3>
<h4>&& and</h4>
<p>${true && true}</p> <%--true--%>
<p>${true && false}</p> <%--false--%>
<p>${false && true}</p> <%--false--%>
<p>${false && false}</p> <%--false--%>

<h4>|| or</h4>
<p>${ture || true}</p> <%--true--%>
<p>${ture || false}</p> <%--true--%>
<p>${false || true}</p> <%--true--%>
<p>${false || false}</p> <%--false--%>

<%--위의 && 연산자와 연산 결과 동일--%>
<h4>&& and</h4>
<p>${true and true}</p>
<p>${true and false}</p>
<p>${false and true}</p>
<p>${false and false}</p>

<%--위의 || 연산자와 연산 결과 동일--%>
<h4>|| or</h4>
<p>${ture or true}</p>
<p>${ture or false}</p>
<p>${false or true}</p>
<p>${false or false}</p>

<h4>!</h4>
<p>${not true}</p> <%--false--%>
<p>${not false}</p> <%--true--%>

 

✅ 삼항연산

<h3>삼항연산자</h3>
<p>${true ? "hello" : "world"}</p>
<%--hello--%>
<p>${false ? "hello" : "world"}</p>
<%--world--%>

 

✅ empty 연산자

 

<h3>empty 연산자</h3>
<p>길이가 0인 컬렉션, 문자열, 존재하지 않는 attribute, null일 때 true</p>
<p>${empty attr1}</p> <%--빈 List : true--%>
<p>${empty attr2}</p> <%--빈 Map : true--%>
<p>${empty ""}</p> <%--true--%>
<p>${empty 0}</p> <%--true--%>

JSTL(JavaServer Pages Standard Tag Library)

 

JSTL은 JSP 페이지에서 반복, 조건문 등의 작업을 쉽게 수행하기 위해 만든 라이브러리이다.

JSTL 라이브러리를 사용하기 위해서는 <%@ taglib %> 지시자를 사용해야 한다

<%@ taglib prefix="c" uri="jakarta.tags.core" %>

 

✅ <c:if>

 

<c:if> 태그로 조건문을 수행할 수 있다.

<c:if test="${age >= 20}">
    <p>투표 가능</p>
</c:if>

<c:if test="${age < 20}">
    <p>투표 불가능</p>
</c:if>

 

<c:if> 태그는 다른 언어의 else문이 존재하지 않으므로 else문과 같은 결과를 내기 위해서는 연산 결과를 var에 담아 부정해준다.

<c:if test="${5 > 8 && 9 > 2}" var="result">
    <p>출력1</p>
</c:if>
<c:if test="${not reslut}">
    <p>출력2</p>
</c:if>

 

✅ <c:choose>, <c:when>, <c:otherwise>

 

<c:choose> 태그로 다른 언어에서 if문과 else문을 사용한 효과를 낼 수 있다.

조건이 true인 <c:when> 태그를 만나면 해당 태그 내부를 실행하고 그렇지 않다면 <c:otherwise> 태그의 내부가 실행된다

<c:choose>
    <c:when test="${age < 10}">
        <p>유아 의류 검색</p>
    </c:when>
    <c:when test="${age < 20}">
        <p>청소년 의류 검색</p>
    </c:when>
    <c:otherwise>
        <p>성인 의류 검색</p>
    </c:otherwise>
</c:choose>

 

✅ <c:forEach>

 

<c:forEach> 태그로 반복 작업을 수행할 수 있다

begin과 end로 시작지점과 종료지점을 나타낼 수 있다. 이때 begin은 0 이하로 떨어질 수 없다

 

var는 forEach 태그 내에서 사용하는 변수를 나타낸다

또, varStatus 속성을 통해 반복문을 더 쉽게 제어할 수 있다

varStatus = "status"

• ${status.current} : 현재 아이템
• ${status.index} : 0부터의 순서
• ${status.count} : 1부터의 순서
• ${status.first} : 현재 루프가 처음인지 반환
• ${status.last} : 현재 루프가 마지막인지 반환

 

<c:forEach begin="1" end="3" var="num">
    <p>반복 출력 할 코드${num}</p>
</c:forEach>

<%-- result--%>
<%--반복 출력 할 코드--%>
<%--반복 출력 할 코드--%>
<%--반복 출력 할 코드--%>

 

다음은 c:forEach 태그로 자료구조의 내용을 반복문 처리 하는 방법이다

items 속성은 반복할 값들이 있는 배열과 리스트명으로 리스트의 값들을 var 속성의 item이라는 값에 담아 출력하고 있다.

  @RequestMapping("sub5")
    public void method5(Model model) {
        model.addAttribute("myList", List.of("java", "css", "react"));
    }

<p>
    기술들 :
    <c:forEach items="${myList}" var="item" varStatus="status">
        ${item}
        <%-- 반복문이 마지막이 아니라면 ',' 넣기 --%>
        <c:if test="${not status.last}">
            ,
        </c:if>
    </c:forEach>
</p>

 

✅ <c:set>

 

attribute를 추가할 수 있다.

• value : attribute의 값을 입력한다
• target : 프로퍼티를 설정할 빈 또는 맵을 가진다
• property : 설정할 프로퍼티
• var : 값이 되는 변수명
• scope : 변수가 저장된 Scope. page, request, session, application을 가질 수 있고 기본값은 page이다.

@Getter
@Setter
@AllArgsConstructor
public class MyBean131 {
    private String address;
    private String city;
    private Integer age;
}

@RequestMapping("sub1")
    public void sub1(Model model) {
        MyBean131 obj1 = new MyBean131("신촌", "서울", 44);
        model.addAttribute("obj1", obj1);
    }

<c:set var="attr1" value="손흥민"></c:set>
<c:set var="attr2" value="이강인"></c:set>
<c:set var="attr3" value="김하성" scope="page"></c:set>

<%-- 손흥민 --%>
<p>${attr1}</p>
<%-- 이강인 --%>
<p>${attr2}</p>
<%-- 김하성 --%>
<p>${attr3}</p>

<hr>

<c:set target="${obj1}" property="address" value="강남"></c:set>
<c:set target="${obj1}" property="age" value="55"/>
<p>${obj1.address}</p> <%-- 강남 --%>
<p>${obj1.age}</p> <%-- 55 --%>

 

✅ <c:url>

 

<c:url> 태그는 주소를 생성하고 저장할 수 있는 태그이다. 여러 곳에서 반복해서 쓰는 주소를 담을 수 있다.

• value : 주소값을 담음
• var : 주소값의 변수명을 지정

<c:url> 태그 내부에 <c:param> 태그를 넣어서 쿼리문 형태로 변환할 수 있다.

<%-- https://search.naver.com/search.naver?query=뉴진스&where=nexearxh&sm=tab_hty.top --%>
<c:url value="https://search.naver.com/search.naver" var="naverUrl">
    <c:param name="query" value="뉴진스"/>
    <c:param name="where" value="nexearch"/>
    <c:param name="sm" value="tab_hty.top"/>
</c:url>
<a href="${naverUrl}">네이버</a>

 

 

✅ <c:import>

 

<c:import> 태그는 경로로 지정한 jsp 파일을 삽입한다. 주로 페이지마다 공통된 메뉴를 삽입할 때 사용한다

<c:import> 태그 내에 <c:param> 태그를 사용하면 name에 이름, value에 값을 넣어서 import 되는 파일에 전달할 수 있다

전달받은 파라미터는 import된 파일에서 사용 가능하다

<%-- 경로 : /로 시작하지 않으면 상대경로(현재경로 기준) --%>
<c:import url="navbar1.jsp"/>

<%-- 경로 : /로 시작하면 절대경로 webapp 폴더 기준--%>
<c:import url="/WEB-INF/view/main16/navbar1.jsp"/>

<c:import url="/WEB-INF/fragment/navbar3.jsp">
	// 파라미터 전달 가능
    <c:param name="current" value="sub3"/>
</c:import>

// 전달받은 파라미터 current의 값에 따라 해당하는 a태그의 배경색 변경
<style>
    .active {
        background-color: lightblue;
    }
</style>
<div style="display: flex; justify-content: space-between">
    <div>
        <a class="${param.current eq 'sub3' ? 'active' : ''}" href="/main17/sub3">sub3</a>
        <a class="${param.current eq 'sub4' ? 'active' : ''}" href="/main17/sub4">sub4</a>
        <a class="${param.current eq 'sub5' ? 'active' : ''}" href="/main17/sub5">sub5</a>
    </div>
</div>