웹 개발 기초/자바 웹을 다루는 기술

인클루드 액션 태그 사용하기

sungw00 2023. 2. 28. 22:39
728x90

인클루드 디렉티브 태그처럼 화면을 분할해서 관리할 때 사용

공통적으로 사용하는 홈페이지의 상단 화면과 왼쪽 메뉴 화면을 재사용할 수 있음

 

인클루드 액션 태그의 형식

<jsp:include page="jsp페이지" flush="true 또는 false">
	...
</jsp:include>

여기서 page는 포함할 JSP 페이지를 의미하고, flush는 지정한 JSP를 실행하기 전 출력 버퍼 비움 여부를 지정한다.

 

인클루드 디렉티브 태그와 인클루드 액션 태그의 차이점

항목 인클루드 액션 태그 인클루드 디렉티브 태그
기능 JSP 레이아웃 모듈화 JSP 레이아웃 모듈화
처리 시간 요청 시간에 처리 JSP를 자바 코드로 변환 시 처리
포함된 JSP 자바 파일 변환 여부 포함되는 JSP가 각각 자바 파일로 생성 포함되는 JSP가 포함하는 JSP에 합쳐진 후 한 개의 자바 파일로 생성

인클루드 액션 태그 처리 과정

  1. 브라우저 요청 시 JSP 파일을 컴파일
  2. 컴파일 시 <jsp:include>가 지시하는 JSP를 요청
  3. 요청된 JSP를 컴파일
  4. 컴파일 된 JSP가 응답을 보냄
  5. JSP는 브라우저에서 요청한 응답 결과를 출력

JSP 페이지에 이미지 포함 실습

1. duke_image.jsp, include1.jsp, include2.jsp 파일 작성

<%-- duke_image.jsp --%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	<%-- param 액션 태그로 전달된 매개변수를 getParameter() 메서드를 이용해 가져옴 --%>
	request.setCharacterEncoding("utf-8");
	String name = request.getParameter("name");
	String imgName = request.getParameter("imgName");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>듀크 이미지</title>
</head>
<body>
	<br><br>
	<h1>이름은 <%= name %>입니다.</h1><br><br>
	<img src="./image/<%= imgName %>" />
</body>
</html>

부모 JSP에서 포함 요청 시 전달되는 이름과 이미지 파일을 getParameter( ) 메서드를 이용해 가져온 후 이름과 해당 이미지를 출력

<%-- include1.jsp --%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>include1.jsp</title>
</head>
<body>
	안녕하세요. 쇼핑몰 중심 JSP 시작입니다!!!
	<br>
	<jsp:include page="duke_image.jsp" flush="true" > <%-- duke_image.jsp를 동적으로 포워딩 --%>
    	<%-- param 액션 태그를 이용해 duke_image.jsp로 이름과 파일 이름을 전달 --%>
		<jsp:param name="name" value="듀크" />
		<jsp:param name="imgName" value="duke.png" />
	</jsp:include>
	<br>
	안녕하세요. 쇼핑몰 중심 JSP 끝 부분입니다.!!!
</body>
</html>

<jsp:include> 태그의 page 속성에 포함할 자식 JSP인 duke_image.jsp를 지정, <jsp:param> 태그(param 액션 태그)를 이용해 이름과 이미지 파일 이름을 동적으로 자식 JSP인 duke_image.jsp로 포워딩

<%-- include2.jsp --%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>include2.jsp</title>
</head>
<body>
	안녕하세요. 쇼핑몰 중심 JSP 시작입니다!!!
	<br>
	<jsp:include page="duke_image.jsp" flush="true" >
        <%-- param 액션 태그를 이용해 duke_image.jsp로 이름과 파일 이름을 전달 --%>
		<jsp:param name="name" value="듀크2" />
		<jsp:param name="imgName" value="duke2.png" />
	</jsp:include>
	<br>
	안녕하세요. 쇼핑몰 중심 JSP 끝 부분입니다.!!!
</body>
</html>

자식 JSP로 다른 이름과 이미지 파일 이름을 전달

 

2. http://localhost:8090/pro13/include1.jsp로 요청 결과 확인

include1.jsp 요청 시 결과 출력

3. http://localhost:8090/pro13/include2.jsp로 요청 결과 확인

include2.jsp 요청 시 결과 출력

이처럼 인클루드 액션 태그는 포함되는 자식 JSP에 데이터를 동적으로 전달해서 원하는 결과를 출력할 수 있다.


JSP 파일의 변환된 결과 확인하기

/Users/sungwoo/Desktop/myJSP/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/work/Catalina/localhost/pro13/org/apache/jsp

위 경로를 탐색기로 진입하면 다음처럼 JSP 파일이 자바 파일로 변환된 것을 확인할 수 있다.

자바 파일로 변환된 상태

JSP 파일마다 하나의 자바 파일이 생성된다.

 

여기서 인클루드 액션 태그로 요청한 include1.jsp의 자바 파일을 열어보면 <jsp:param> 태그로 전달한 매개변수들이 자식 JSP로 전달되는 것을 코드로 직접 확인할 수 있다.

인클루드 액션 태그의 <param> 태그의 값이 request 객체에 바인딩되어 자식 JSP로 전달된다.

include 액션 태그가 포함된 JSP 파일 변환 결과(include1_jsp.java)

 

728x90