티스토리 뷰

 [jsp9강] JSTL CORE 태그 사용법 



이번글에서는 JSTL 태그중 가장많이 사용하는 CORE 태그에 대해서 알아보겠습니다.

CORE 태그는 쉽개 생각하시면 됩니다.

JSP 페이지에 변수나... 조건문... 반복문 을 사용하수있게 해줍니다.

한마디로 자바 코드없이 JSP 페이지에 변수나... 조건문... 반복문 기능을 사용할수 있게 해줍니다.

설명에 들어가기전 JSTL 무엇인지 모르거나.. 태그의종류 및 라이브러리 설정법이 모르시면..

아래링크를 참조해주세요!


 이전 글 링크 


그럼이제 JSTL CORE 태그들의 사용법을 예제를통해서 하나하나씩 알아보겠습니다.

(관련있는 테그들을 묶어서 설명하였습니다.)


 1. set, remove (변수기능)

1-1.  <c:set> 태그


<c:set> 태그는 EL 변수의 값이나 EL 변수의 프로퍼티의 값을 지정할떄 사용하고..

JSTL의 태그에서 사용할 변수의 값을 처리할떄 사용한다.

사용문법은 다음과 같습니다.

 사용 문법 

<c:set var = "varName" value = "varValue" [scope = "지정영역"] />

또는

<c:set target = "대상" property="프로퍼티이름" value="값"/>


( var : 값을 지정할 EL 변수의 이름

value : 변수의 값을 지정한다. 표현식, EL, 정적인 텍스트를 사용하여 값을 지정할 수 있다.

scope : 변수를 저장할 영역을 지정한다. 값은 page, request, session, application 중 하나가 온다. 지정하지 않을 경우 기본값은 page이다.

target : 프로퍼티 값을 설정할 대상 객체. 표현식(<%=변수%>)이나 EL 변수(${varName})를 지정한다. 대상 객체는 자바빈 객체나 Map이어야 한다.

property : 설정할 프로퍼티의 이름. target이 자바빈 객체인 경우 프로퍼티 이름에 해당하는 set 메서드를 제공해 주어야 한다. 예를 들어, 프로퍼티 이름이 name 인 경우 target 객체는 getName() 메서트를 제공해야 한다. Map인 경우 Map.out(프로퍼티, 값)을 이용해서 값을 추가한다. )

예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
 
 
    <!-- 첫번째 사용법 (jstl 변수를 생성하여 사용하는법) -->
    <c:set var="test1"  value="니나노"/>
    <div style="background-color: yellow;">${test1}</div>
 
 
 
 
    <!-- 두번째 사용법 (빈즈활용) -->
    <!-- 자바 빈즈가 필요함. 한페이지에서 설명하기위해.. map 으로 대체 -->
    <% Map<StringString> member = new HashMap<StringString>();
    member.put("name""홍길동");
    %>
    
    <c:set var="member"  value="<%=member%>"/>
    <div style="background-color: yellow;">${member.name}</div>
    <c:set target = "<%=member%>" property = "name" value = "홍길동2"/>
    <!-- jstl 변수 뿐만아니라 빈즈의 값도 변경된걸 확인할수 있다. -->
    <div style="background-color: yellow;"><%=member.get("name")%></div>
    <div style="background-color: yellow;">${member.name}</div>
</body>
</html>
cs

실행결과 및 설명 


첫번쨰 출력문은 "니나노" 이다.

이것은 정말로 JSTL 변수로 사용했을떄의 출력결과이다.


<c:set var="test1"  value="니나노"/>
<div style="background-color: yellow;">${test1}</div>


이렇게 div 요소에 바로 출력한 결과이다.


다음 출력물 "홍길동" 은 자바에서 만들어준 맵 객체의 member 을 출력해보았다.


<% Map<StringString> member = new HashMap<StringString>();
   member.put("name""홍길동");
%>
    
<c:set var="member"  value="<%=member%>"/>
<div style="background-color: yellow;">${member.name}</div>


그결과 적용되어서 출력되는것을 확인할수있다.

맵에서도 get 함수가 존재하기때문에 ${member.name} 과같이 바로 사용해도 문제가 되지않는다.


다음 출력물 "홍길동2" 이다.


<c:set target = "<%=member%>" property = "name" value = "홍길동2"/>
<!-- jstl 변수 뿐만아니라 빈즈의 값도 변경된걸 확인할수 있다. -->
<div style="background-color: yellow;"><%=member.get("name")%></div>
<div style="background-color: yellow;">${member.name}</div>


jstl set 을 활용하여 target 을 member 로 잡아준후 name 값을 홍길동2로 변경해 준후에

2가지 방법으로 div 에 출력을 해보았다.

그결과 두가지 결과모두 "홍길동2" 가 출력된것을 확인할수 있다.

즉 빈즈의 값도 병경된걸 확인할수 있다.


1-2. <c:remove> 태그

<c:remove> 태그는 <c:set> 태그로 지정한 변수를 삭제할때 사용됩니다.

사용문법은 다음과 같습니다.

 사용 문법 

  <c:remove var = "varName" [scope = "영역"]/>

예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
 
 
    <c:set var="test1"  value="니나노"/>
    <div style="background-color: yellow;">${test1}</div>
    <!-- c:remove 사용하여 c:set 변수를 삭제 -->
    <c:remove var = "test1"/>
    <div style="background-color: yellow;">${test1}</div>
 
</body>
</html>
cs

실행결과 및 설명 


예제의 소스코드를 확인해보자.


<c:set var="test1"  value="니나노"/>
<div style="background-color: yellow;">${test1}</div>
<!-- c:remove 사용하여 c:set 변수를 삭제 -->
<c:remove var = "test1"/>
<div style="background-color: yellow;">${test1}</div>


그럼 set 으로 test1 변수를 만들고 "니나노" 라는 값을 넣어주었다.

그다음 div 에 출력을해보니 값이 있어 출력이 되었다.

그다음 remove 태그를 사용하여 test1 변수를 삭제한후..

div로 출력을 해보니 출력인 안된것을 확인할수있다..

즉.. 변수가 없어지면서 텍스트가 출력이 안된것이다.



 2. if, choose, when, otherwise (조건문)


2-1. <c:if> 태그


자바의 if 문하고 같다고 생각하면 됩니다.

조건이 true 이면 출력하고...

false 이면 출력을 안합니다.

( else 조건은 따로 없음.. 그래서 choose 를 사용하면 됩니다...)


사용 문법 

  <c:if test="조건" [var = "testResult"]/>

예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
 
    <c:set var="test1"  value="3"/>
    <c:if test="${test1 > 1}">
        <div style="background-color: yellow;">1보다 크기때문에 true 라서 화면에 출력됨..</div>
    </c:if>
    <c:if test="${test1 < 1}">
        <div style="background-color: yellow;">1보다 크기때문에 false 라서 화면에 출력안됨..</div>
    </c:if>
 
</body>
</html>
cs

실행결과 및 설명 


예제를 살펴봅시다.


    <c:set var="test1"  value="3"/>
    <c:if test="${test1 > 1}">
        <div style="background-color: yellow;">1보다 크기때문에 true 라서 화면에 출력됨..</div>
    </c:if>
    <c:if test="${test1 < 1}">
        <div style="background-color: yellow;">1보다 크기때문에 false 라서 화면에 출력안됨..</div>
    </c:if>


set 으로 변수 test1 에 값을 3을 주었습니다.

그다음 if 조건문에 조건을 1보다 큰지, 1보다 작은지.. 두개의 if 문을 만들었습니다.

(test 구문에는 조건문을 입력하면됩니다.)

(숫자비교시 자동으로 int 타입으로 형변환되어 비교됨.) 

두개의 조건문의 결과 1보다 큰것만 화면에 출력된것을 확인할수 있습니다.


2-2. <c:choose> ,<c:when>, <c:otherwis> 태그


<c:if> 에서는 아쉽게도 else 와 else if 가 없습니다.

그렇기 때문에 대체로 사용하는것이 <c:choose> ,<c:when>, <c:otherwis> 태그 입니다.

3개는 같이 사용한다고 생각하시면 됩니다..


사용 문법 

  <c:chose>

 <c:when test="조건">실행문</c:when>

<c:otherwise>실행문</c:otherwise>

</c:chose>


이렇게 chose 태그 안에 when, otherwise 태그를 넣어 사용하시면됩니다.

when 태그는 자바의 else if 라고 생각하시면 되고...(여러게 사용가능)

otherwise 태그는 else 태그라고 생각하시면 됩니다..(하나만 사용)

예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
 
    <c:set var="test1"  value="3"/>
    <c:choose>
        <c:when test="${test1 < 1}">
            <div style="background-color: yellow;">1보다 작음</div>
        </c:when>
        <c:when test="${test1 == 3}">
            <div style="background-color: yellow;">3과 같음</div>
        </c:when>
        <c:otherwise>
            <div style="background-color: yellow;">쩌리</div>
        </c:otherwise>
    </c:choose>
 
</body>
</html>
cs

실행결과 및 설명 


예제를 살펴봅시다.


    <c:set var="test1"  value="3"/>
    <c:choose>
        <c:when test="${test1 < 1}">
            <div style="background-color: yellow;">1보다 작음</div>
        </c:when>
        <c:when test="${test1 == 3}">
            <div style="background-color: yellow;">3과 같음</div>
        </c:when>
        <c:otherwise>
            <div style="background-color: yellow;">쩌리</div>
        </c:otherwise>
    </c:choose>

변수 test1 에 3의 값을 넣어준후...
첫번째 when 조건문에서 1보다 작은지 물어보고...
다음 when 조건문에서 3과 같은지 물어보았습니다. 그결과 3과 같기때문에 choose 문은 종료과 되고..
결과에 3과같은 이라는 문구가 나옵니다..
여기서 알수있는점은 조건하나가 성립하면 choose 문이 끝난다는것을 알수있습니다.



 3. forEach, forTokens (반복문)


3-1. <c:forEach> 태그


자바의 for 문과 같다고 생각하시면 됩니다.


사용 문법 

  <c:forEach var="변수"  item = "아이템" [begin ="시작값" end="종료값" step="증가값" varStatus="현재의값"]/>


var : 루프에서의 변수입니다.

item : 루프를 돌리기위한 값입니다. (Map, 배열, collection 등...)

begin : 루프 시작점

end : 루프 종료점

step : 루프 증가값

varStatus : 현재의값 (리스트 출력시 1위 2위 3위.. 이런식으로 출력할때 사용) 

(varStatus에는 여러 속성들이 있습니다...

index = 루프 실행에서 현재 인덱스

count = 루프 실행 횟수

begin = begin 속성 값

end = end 속성 값

step = step 속성 값

first = 현재 실행이 첫 번째 실행인 경우 true

last = 현재 실행이 루프 마지막 실행인 경우 true

current = 컬렉션 중 현재 루프에서 사용할 객체

)

예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
 
 
    <% 
    List<Map> memberList = new ArrayList<Map>();
    
    Map<StringString> member = new HashMap<StringString>();
    member.put("name""홍길동");
    member.put("age""21");
     
    
    Map<StringString> member2 = new HashMap<StringString>();
    member2.put("name""김순이");
    member2.put("age""30");
    
    
    
    memberList.add(member);
    memberList.add(member2);
    
    %>
    <c:forEach var="member" items="<%=memberList %>" >
        <div style="background-color: yellow;">
            이름 : ${member.name} 나이 : ${member.age}
        </div>
    </c:forEach>
 
    
 
</body>
</html>
cs

실행결과 및 설명 


forEach 문을 사용하기 위해 우선 값을 만들어 주었습니다. (list<map> 형식으로 만들어 주었습니다.)


<% 
    List<Map> memberList = new ArrayList<Map>();
    
    Map<StringString> member = new HashMap<StringString>();
    member.put("name""홍길동");
    member.put("age""21");
     
    
    Map<StringString> member2 = new HashMap<StringString>();
    member2.put("name""김순이");
    member2.put("age""30");
    
    
    
    memberList.add(member);
    memberList.add(member2);
    
    %>


위에서 만들어준 값을 활용하여 forEach 문을 돌려 보았습니다.


<c:forEach var="member" items="<%=memberList %>" >
        <div style="background-color: yellow;">
            이름 : ${member.name} 나이 : ${member.age}
        </div>
    </c:forEach>


var 의 이름을 member 라고 만들어주고.. item에 아까 만들어 놓은 값을 넣어주었습니다.

그럼 forEach 문이 돌아가며면서 member 라는 Map 형태의 값을 하나씩 쓸수있게 됩니다.

그래서 member 로 하나씩 꺼내서 출력하도록 하였습니다.


3-2. forTokens 


자바의 split 기능이라고 쉽게 생각하시면 됩니다.


  <c:forTokens var="변수" items="아이템" delims="자를 문구" [varStatus="status"]/>


( varStatus는 forEach 와 동일합니다. )

예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    
    <c:set var="nameGroup" value="철수,영미,나미,우솝,루피"/>
    <c:forTokens var="name" items="${nameGroup}" delims=",">
        <div style="background-color: yellow;">
            이름 : ${name}
        </div>
    </c:forTokens>
 
    
 
</body>
</html>
cs

실행결과 및 설명 


우선 변수를 만들어주었습니다.


<c:set var="nameGroup" value="철수,영미,나미,우솝,루피"/>


nameGroup에 이름들을 쉼표로 구분하여 넣어주었습니다.

그다음.. 


<c:forTokens var="name" items="${nameGroup}" delims=",">
        <div style="background-color: yellow;">
            이름 : ${name}
        </div>
    </c:forTokens>

forTokens 태그를 사용하여 돌려서 하나씩 출력되도록 하였습니다.
구분자는 쉼표로 delims="," 설정해 주었습니다.
그럼 위의 결과처럼 스플릿되어 나온것을 확인할수 있습니다.




 3. catch, url, param, import, redirect, out (기타 기능)


기타기능들은 사실 별로 사용하지 않습니다..

다른곳에서 대체가 가능하기에... 사실 몰라도 필요할때만 찾아서 사용하시면됩니다.

기타 기능들은 문법만 정리하도록 하겠습니다..


사용 문법 

  <c:catch var="명칭"></c:catch> 


<c:url value = "링크"/>


<c:param 속성="값".../>


<c:import url="url" [context="context"] [var="varName"]  [scope="{page|request|session|application}"] [charEncoding="charEncoding"]>


<c:redirect url="value" [context="context"]/>


<c:out value="value" [escapeXml="{true|false}"] [default="value가 없을 때 표시될 문자"]  />


 글을 마치며..


jstl 에서 가장많이 쓰이는 core 에대해서 알아보았습니다.

기타 기능을 제외하고는 정말 많이 사용하니 꼭알아두시길 바랍니다.


 정리 

 1. jstl 의 문법은 자바와 비슷하다.

2. 자바를 공부하셧다면 금방 하실수 있다.

3. 변수, 조건문, 반복문은 많이 사용하니 꼭 알아두자..


이상으로 JSTL CORE 태그 사용법에 대해서 알아보았습니다.

수고하세요!


도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요! 



댓글