커스텀 태그

1.

커스텀 태그란 ?

 

View 에서 사용 하는 모듈화 기법 이다.

 

모듈화로 인해, 다음과 같은 이점을 가지게 된다.

 

코드에 대한 가독성이 좋아 진다.

코드의 유지보수가 용이해 진다.

코드의 재사용성이 증가 한다.

 

코드의 재사용성이 증가함에 따라,

개발 시간이 단축되고,

개발 비용이 절감되고,

회사의 이익이 증가 한다.

 

2.

커스텀 태그를 사용 하는 방법 ?

 

<%@ taglib tagdir="/WEB-INF/tags" prefix="hwan" %>

 

상단에, 위와 같이 태그 지시어를 작성 한다.

 

.tag 페이지가 존재하는 경로를 지정해 준다.

 

현재, WEB-INF 폴더 내부에, tags 라는 폴더에 .tag 파일을 저장해 놓았기 때문에, 경로가 위와 같게 된다.

 

prefix는 어떤 단어로 커스텀 태그 페이지 파일을 부를것인지를 지정해주는 것이다.

 

.tag 파일은, 커스텀태그페이지명.tag 로 만들면 된다.

 

 

 

 

3.

커스텀 태그는 View 파트 모듈화 기법이라고 위에서 정리했다.

 

View 파트에서, 코드가 상당히 길다고 가정을 해보자.

 

이런 경우, 태그가 잘 보이지 않아 가독성이 떨어지게 될것이다.

(HTML 태그, JSTL 태그, EL식, ..)

 

이런 경우에, 커스텀 태그를 기법을 사용해서, 

가독성이 떨어지는 코드를 .tag 페이지에 작성하고,

View와 .tag 페이지를 연결 시켜주는 것이다.

 

View와 .tag 페이지를 연결 시켜주는 방법은 아래와 같다.

 

 

hello.tag 라는 페이지가 있을때,

 

<%@ taglib tagdir="/WEB-INF/tags" prefix="hwan" %>

 

상단에 prefix = hwan 으로 해줬기 때문에,

 

 

이런식으로 커스텀 태그를 불러 올 수 있다.

 

 

 

4.

예시 2)

 

 

ProductBean 클래스가 있다.

 

예시를 위해 만든 클래스 이고,

현재, pdatas는 값이 초기화가 되어있는 상황 이다.

 

표현 방법은 다음과 같다.

 

<jsp:useBean id="pb" class = "model.ProductBean"></jsp:useBean>

 

우선, ProductBean 클래스를 객체화 해서 선언 해야 하기 때문에,

위와 같이, useBean 액션 태그를 사용해서 pb 라는 객체명으로 선언한 모습을 볼 수 있다.

 

<h1>상품 목록</h1>

<hr>

<ul>

<% for(String data : pb.getPdatas()) { %>

<li><%= data %></li>

<% } %>

 

</ul>

 

그리고 위와 같이 표현 할 수 있다.

 

View 파트라서, 자바 언어를 사용 하지 않아야 하지만, 예시를 위해 작성한 모습이다.

 

이렇게 표현하지 않으려면, EL식을 사용해서 표현 할 수 있다.

 

암튼, 지금 자바 언어를 사용 하고 있는데,

 

이미 ProductBean 클래스에서 pdatas를 초기화 해줬기 때문에,

 

값을 초기화 해줄 필요가 없어서, setProperty  액션 태그는 사용 하지 않은 상황 이다.

 

웹 페이지에서 확인 해 보자.

 

 

위의 이미지와 같이 뜨는 모습을 확인 할 수 있다.

 

근데, 위의 코드를 커스텀 태그 개념으로 표현하면 어떻게 될까 ?

 

.tag 파일을 만들어서, 해당 코드를 .tag 파일에 전부 밀어 넣으면 된다.

 

밀어넣고, View 페이지와 .tag 파일을 이어 주면 된다.

 

<%@ taglib tagdir="/WEB-INF/tags" prefix="hwan" %>

 

상단에, 위의 태그 지시어를 작성 해주고,

 

<hwan:productList border = "10" bgcolor = "lightpink">상품 목록</hwan:productList>

 

이런식으로 코드를 작성 할 수 있다.

 

prefix = hwan 이고,

 

.tag 파일명은 productList.tag 이다.

 

border = "10" bgcolor = "lightpink" 부분은 아래에서 정리 하겠다.

 

productList.tag 페이지를 확인해보자.

 

<jsp:useBean id="pb" class = "model.ProductBean"></jsp:useBean>

 

해당 페이지에서, pb 객체를 사용 해야 하기 때문에, 객체를 선언한 모습이다.

 

<table border = "${border}" bgcolor = "${bgcolor}">

<% for(String data : pb.getPdatas()){ %>

<tr><td><b><%= data%></b></td></tr>

<% } %>

 

</table>

 

table 로 표현 해보고 싶어서, table 태그를 사용해 보았다.

 

이거 역시, EL 식을 사용 하지 않고, 예제를 위해서 자바의 표현식을 사용한 모습이다.

 

<table border = "${border}" bgcolor = "${bgcolor}">

 

위의 코드를 사용 하기 위해서, 상단에 속성(프로퍼티) 를 set 해줘야 한다.

 

표현 방법은 아래와 같다.

 

<%@ attribute name = "border" %>

<%@ attribute name = "bgcolor" %>

 

<h1><jsp:doBody /></h1>

 

위의 코드는, 아래와 같다.

 

커스텀 태그를 품고 있는 메인 페이지 에서, 커스텀태그 표현식을 작성 했을 때,

 

<hwan:productList border = "10" bgcolor = "lightpink">상품 목록</hwan:productList>

 

이런 식일텐데, 커스텀 태그를 여는 태그와 닫는 태그 사이에 있는 

상품 목록 이라는 부분을 <h1> 태그의 효과를 주겠다는 의미 이다.

 

border 하고, bgcolor 부분 개념 다시 정리 하기.