[05] JSP 응용 : EL

EL

Expression Language(표현언어) 를 통해 JSP코드를 간단하게 줄일 수 있다.

---

EL이란?

• Expression Language(표현언어)
• JSP 내장객체(Scope)에 담긴 데이터(Attribute)를 뽑아 화면에 출력하는 과정을 간략화시켜준다.
  (기존의 스크립틀릿 + 출력식을 대신해서 쓸 수 있음)
• [표현법] $ { 변수, 키 등 출력값 } 
  >>이때 {} 안에서 조건식, 메소드 등 자바 문법을 쓸 수 있다.

<!-- 기존의 JSP 표현 방법 -->
	<% String name = request.getAttribute("name"); %>
	<%= name %>
<!-- EL 표현방법 -->
	${ name }

 

 

JSP 내장객체 종류(복습)

1. ServletContext (applicationScope)
   >>가장 큰 범위
   - request.getServletContext() 으로 객체를 생성할 수 있다.
   - 한 어플리케이션당 단 1개만 존재하는 객체
   - 여기에 담은 데이터는 어플리케이션 전역(jsp, servlet, java)에서 사용가능
   - 활용도가 높지는 않다.
2. HttpSession (sessionScope)
   >>두번째로 큰 범위
   - request.getSession() 으로 객체를 생성할 수 있다.
   - 한 브라우저당 1개씩 존재하는 객체(크롬, 시크릿크롬, IE 등 각 브라우저당 1개만 존재)
   - 여기에 담은 데이터는 모든 jsp, servlet에서 다 사용 가능
3. HttpServletRequest (requestScope)
   >> 세번째로 큰 범위
   - url로 요청을 할때마다 생성되는 객체
   - 매개변수로 선언되어있어 바로 사용 가능
   - 여기에 담은 데이터는 해당 request를 포워딩 받는 응답 jsp에서만 사용 가능
4. PageContext (pageScope)
   >> 가장 작은 범위
   - 매 jsp마다 존재하는 객체로 pageContext 로 접근가능하다.
   - 여기에 담은 데이터는 해당 jsp에서만 사용 가능(서블릿에서 접근 불가)
   - contextPath를 알아낼 때 활용할 수 있다.
     >> ${ pageContext.servletContext.contextPath }

 

 

내장객체 활용(복습)

• 데이터 담기 : 내장객체.setAttribute("키", 밸류값)
• 데이터 꺼내기 : 내장객체.getAttribute("키") = 밸류값리턴
• 데이터 제거하기 : 내장객체.removeAttribute("키")

 

 

---

EL사용방법

기본 사용방법을 알아보고 실습을 해본다.

 

---

EL 사용방법

• EL 구문(${ ... }) 내에 attribute의 키값을 제시하면 자동으로 모든 내장객체에 탐색해서 값을 가져온다. 이때, 공유범위가 가장 작은 Scope에서부터 해당 키값을 탐색하다가 값을 찾은 경우 해당 값을 리턴함.
  page >> request >> session >> application
• 키값이 중복될경우 Scope를 직접 지정해서 키값을 제시할 수 있다.
  ${ pageScope.키값 }
  ${ requestScope.키값 }
  ${ sessionScope.키값 }
  ${ applicationScope.키값 }
• 만일 모든 영역에서 못찾을 경우(없는 키값인 경우) 아무것도 출력안됨(오류나거나 null 뜨지 않음)
  >> 기본JSP에서처럼 삼항연산자등을 통해 null을 가공할 필요가 없다
  scope를 잘못 지정한 경우에도 출력되지 않는다.
• vo객체일 경우, 필드에 담긴 값이 필요하다면 키값.필드명 으로 접근하면 된다.
  >> 내부적으로 해당 필드의 getter 메소드를 찾아서 수행한다!!(getter메소드 필수)

 

 

기존방식과 EL방식을 비교

• 기존 JSP과정과 EL과정을 비교해보면서 코드가 얼마나 간단해지는지 확인해보자.
  이때, 서블릿에서 내장객체에 setAttribute로 데이터를 담았다고 가정하자

<!-- 기존방식으로 데이터 꺼내기 -->
<%@ page import="com.br.model.vo.Person" %>
<%
    String cRoom = (String)request.getAttribute("classRoom");
    Person tea = (Person)session.getAttribute("teacher");
%>
강의장 : <%= cRoom %> <br>
선생님 : <%= tea.getName() %>, <%= tea.getAge() %>, <%= tea.getGender() %>

<!-- EL 방식으로 데이터 꺼내기 -->
강의장 : ${classRoom} <br>
선생님 : ${teacher.name}, ${teacher.age}, ${teacher.gender} <br>

 

 

---

EL연산특성

EL의 연산특성에 대해 알아보고 실습해본다.

---

EL 연산특성

• EL안에서의 산술연산시에는 숫자로 파싱한 후에 연산을 하기 때문에 문자열간의 덧셈연산은 불가능하다.
  >> 그냥 연이어서 써주면 문자열이 이어진다.
• 나누기는 몫이 아닌 실제 산술연산값이 계산된다.
• EL안에서 숫자리터럴 제시시 그대로 입력하면 되고 문자열 리터럴은 은 " " 또는 ' ' 로 감싸서 입력한다.
• EL에서 제공하는 연산자와 뜻
  gt : greater than ( > )
  lt : less than ( < )
  ge : greater equals ( >= )
  le : less equals ( <= )
  eq : equals ( == ) >>자바의 equals()와 같은 동작을 한다.
  ne : not equals ( != )
  div  : ( / ) 나눗셈
  mod : ( % )나눈 후 나머지
  empty : 변수가 비어있는지 ( 객체의 경우 null, 리스트의 경우 비어있는 상태 ) (true/false) 연산
  not empty : 변수가 비어있지 않은지 (true/false)
  && : and
  || : or

 

데이터 담아 포워딩

• 서블릿에서 연산에 활용할 데이터들을 담아서 JSP로 포워딩한다.

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    request.setAttribute("big", 10);
    request.setAttribute("small", 3);
		
    request.setAttribute("sOne", "안녕");
    request.setAttribute("sTwo", "잘가");
		
    request.setAttribute("pOne", new Person("강백호", 17, "남자"));
    request.setAttribute("pTwo", null); //조회가 안되었다는 가정하에 null을 넣어본다.
		
    ArrayList<String> list1 = new ArrayList<>(); //조회가 안되었다는 가정하에 비워놓는다.
    ArrayList<String> list2 = new ArrayList<>();
    list2.add("ㅋㅅㅋ");
		
    request.setAttribute("lOne", list1);
    request.setAttribute("lTwo", list2);
		
    request.getRequestDispatcher("views/01_EL/elOperation.jsp").forward(request, response);		
}

 

 

다양한 연산 실습

• 산술연산, 대소비교연산, 동등비교연산, 객체가 비어있는지 여부 연산, 논리연산을 해본다.

<!-- ■■■ 1. 산술연산자 ■■■ -->
*기존방식 : 
	<%= (int)request.getAttribute("big") + (int)request.getAttribute("small")%>
*el방식 : 
	10+3 = ${big + small} <!-- 13 -->
	10-3 = ${big - small} <!-- 7 -->
	10x3 = ${big * small} <!-- 30 -->
	10/3 = ${big / small} 또는 ${big div small} <!-- 3.333... -->
	10%3 = ${big % small} 또는 ${big mod small} <!-- 1 -->
*유의사항 : 문자열을 연이어주고자 할 때 + 연산 사용불가
	${sOne + sTwo} <!-- NumberFormatException = 문자열을 숫자로 parsing하며 오류 -->
* 문자열을 연이어서 출력하고자 할 경우 : 
	${sOne}${sTwo} <!-- 그냥 연이어서 써주면 된다 -->
<!-- ■■■ 2. 대소비교연산자 ■■■ -->
	10이 3보다 크냐 : ${big > small} 또는 ${big gt small} <!-- true -->
	10이 3보다 작냐 : ${big < small} 또는 ${big lt small} <!-- false -->
	10이 3보다 크거나 작냐 : ${big >= small} 또는 ${big ge small} <!-- true -->
	10이 3보다 작거나 같냐 : ${big <= small} 또는 ${big le small} <!-- false -->
<!-- ■■■ 3. 동등비교연산자 ■■■ -->
	sOne과 sTwo가 일치하냐 : ${sOne == sTwo} 또는 ${sOne eq sTwo}  <!-- false -->
	sOne과 sTwo가 일치하지않냐 : ${sOne != sTwo} 또는 ${sOne ne sTwo} <!-- true -->
	big에 담긴 값이 10과 일치하냐 : ${big == 10} 또는 ${big eq 10} <!-- true -->
	sOne에 담긴 값이 "안녕"과 일치하냐 : ${sOne == "안녕"} 또는 ${sOne eq '안녕'} <!-- true -->
<!-- ■■■ 4. 객체가 null인지 / 리스트가 비어있는지 비교 연산자 ■■■ -->
	pTwo가 null이냐 : ${pTwo == null} 또는 ${empty pTwo} <!-- true -->
	pOne이 null이냐 : ${pOne == null} 또는 ${empty pOne} <!-- false -->
	pOne이 null이 아니냐 : ${pOne != null} 또는 ${not empty pOne} <!-- true -->
	lOne이 비어있냐 : ${empty lOne} <!-- true -->
	lTwo가 비어있냐 : ${empty lTwo} <!-- false -->
<!-- ■■■ 5. 논리연산자 ■■■ -->
	${true && true} 또는 ${true and true} <!-- true -->
	${true || true} 또는 ${true or true} <!-- true -->

 

 

---

활용예제

EL을 활용한 태그들을 살펴보자

---

ex1) 마이페이지

• 마이페이지에서 회원의 정보를 표시하는 태그가 있다고 가정해보자.
• JavaScript의 쿼리셀렉터와 EL구문을 활용하여 한줄로 라디오버튼에 checked 속성을 부여하할 수 있다.

	<input type="radio" name="gender" value="M"> 남
	<input type="radio" name="gender" value="F"> 여
<script>
	document.querySelector("input[value=${loginUser.gender}]").checked = true;
</script>