ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Spring MVC - 폼 커스텀 태그(Form Custom Tag)
    Spring/Spring MVC 2021. 12. 26. 22:26
    728x90
    반응형

    폼 커스텀 태그(Form Custom Tag)

    • Spring에서는 <form:태그명> 형태로 되어 있는 커스텀 태그를 제공
    • Form 커스텀 태그를 활용하면 Model 객체에 들어있는 값을 form 요소에 주입 가능
    • 데이터 개수가 많은 정보 수정 페이지를 구성할 때 자주 쓰인다. (회원 정보 수정)
    • 일반 Form 태그보다 사용하기 편리하다.

     


    Form 태그

    우선 Form 커스텀 태그와 어떤 차이가 있는지 JSP에서 데이터들을 추출하여 Form 태그를 이용해 화면을 나타내 보자.

     

     

    index.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    	<a href='test1'>test1</a><br/>
    </body>
    </html>

     

     

    testController.java

    @Controller
    public class testController {
    	
    	@GetMapping("/test1")
    	public String test1(@ModelAttribute("data1") DataBean bean) {
    		
    		bean.setUser_name("홍길동");
    		bean.setUser_id("abcd");
    		bean.setUser_pw("1234");
    		bean.setUser_postcode("1234567");
    		bean.setUser_address1("주소 1번");
    		bean.setUser_address2("주소 2번");
    		
    		return "test1";
    	}
    }
     JSP에 사용할 데이터로 name, id, pw, postcode, address1, address2 데이터를 DataBean 객체에 주입하여
    data1이란 이름으로 request 영역에 저장하였다.

     

    test1.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    	<form action='result' method='post'>
    		이름 : <input type='text' name='user_name' value='${requestScope.data1.user_name }'/><br/>
    		아이디 : <input type='text' name='user_id' value='${requestScope.data1.user_id }'/><br/>
    		비밀번호 : <input type="password" name='user_pw' value='${requestScope.data1.user_pw }'/><br/>
    		우편번호 : <input type='text' name='user_postcode' value='${requestScope.data1.user_postcode }'/><br/>
    		주소1 : <input type='text' name='user_address1' value='${requestScope.data1.user_address1 }'/><br/>
    		주소2 : <input type='text' name='user_address2' value='${requestScope.data1.user_address2 }'/><br/>
    		<button type="submit">확인</button>
    	</form>
    </body>
    </html>
     위와 같이 일반 Form 태그로 작성하다 보면 type, name, vlaue 다 일일이 적어줘야 하는 번거로움이 있다.
    번거로움을 줄이기 위해 Spring에서 Form 커스텀 태그를 제공한다.

     


    Form 커스텀 태그

     이제 일반 Form 태그가 어떻게 바뀌는지 form 커스텀 태그를 사용해 보자.

    (Form 커스텀 태그 사용을 위해 taglib를 추가하자)

     

    test1.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    	<form:form modelAttribute='data1' action='result'>
    		이름 : <form:input path="user_name"/><br/>
    		아이디 : <form:input path="user_id"/><br/>
    		비밀번호 : <form:password path="user_pw"/><br/>
    		비밀번호 : <form:password path="user_pw" showPassword="true"/><br/>
    		우편번호 : <form:input path="user_postcode"/><br/>
    		주소1 : <form:input path="user_address1"/><br/>
    		주소2 : <form:input path="user_address2"/><br/>
    	</form:form>
    </body>
    </html>
    <form:form modelAttribute='data2' action='result'>
     - 어떤 Bean의 데이터를 추출할지 modelAttribute의 값으로 지정해준다.

    이름 : <form:input path="user_name"/><br/>

     - path의 값으로 "user_name"만 적어주면 name, vlaue 안 적어줘도 되는 편리함이 있다.

    비밀번호 : <form:password path="user_pw"/><br/>
    비밀번호 : <form:password path="user_pw" showPassword="true"/><br/>
     - password는 기본적으로 화면에 나타나지 않는다. 화면에 나타내고 싶으면 showPassword
      속성을 true로 해주면 된다.

    결과 화면

     


     

    Model 객체를 이요한 form 커스텀 태그

     Model 객체 또한 Form 커스텀 태그를 이용하여 JSP에서 유기적으로 동작할 수 있다.

    index.jsp와 test.jsp은 코드가 같으니 testController.java만 작성하겠다.

    @Controller
    public class testController {
    	
    	@GetMapping("/test4")
    	public String test4(Model model) {
    		DataBean bean = new DataBean();
    		
    		bean.setUser_name("홍길동");
    		bean.setUser_id("abcd");
    		bean.setUser_pw("1234");
    		bean.setUser_postcode("1234567");
    		bean.setUser_address1("서울시");
    		bean.setUser_address2("강남구");
    		
    		model.addAttribute("model_data", bean);
    		
    		return "test4";
    	}	
    }

     주입한 DataBean의 이름을 "model_data"로 저장했으므로 JSP에서는 modelAttiribute 값을

    "model_data"로 설정하여 Form 커스텀 태그를 이용하면 된다. 

    728x90
    반응형

    댓글

Designed by Tistory.