Spring에 Data Binding(바인딩) - @ModelAttribute, Form 데이터 유지

Spring(스프링)의 Controller에서는 전달되는 데이터를 Method(메서드)에 있는 Bean(빈)으로 Binding(바인딩)을 해주고 Bean(빈)을 Model(모델)의 속성으로 추가해 주는 @ModelAttribute Annotation(어노테이션)에 대해 알아보고 Model(모델)에 추가된 속성을 사용하여 <form> 태그에서 전달된 값을 유지되도록 하겠습니다.

 

 

@ModelAttribute Annotation

 

이전에 알아본 Auto Binding 처럼 웹 브라우저(Web Browser)로 부터 전달되는 데이터를 분석하여 자동으로 Method(메서드)에 있는 Bean(빈)으로 Binding(바인딩)을 해주고 Bean(빈)을 Model(모델)의 속성으로 추가해 줍니다.

 

즉, Controller에서 Method(메서드)에 있는 Bean(빈)을 생성하고 HttpServletRequest 객체를 사용하여 데이터를 가져와서 Bean(빈)의 Member Variable(멤버 변수)와 동일한 파라미터의 이름으로 된 데이터를 타입에 맞게 변환하고 setter 메서드를 사용하여 넣어 줍니다. 그리고 Model(모델)의 addAttribute() 메서드를 사용하여 Bean(빈)을 추가합니다.

@ModelAttribute Bean Parameter

 

옵션으로 name, value, binding을 설정할 수 있습니다.

@ModelAttribute(name="Model Attribute Name", value="Model Attribute Name", binding=true) Bean Parameter

• name : Model(모델)에 추가할 속성 이름 (String)
• value : name()의 별칭 (String)
• binding : Model(모델)의 속성으로 추가할지 여부 - true이면 추가, 기본값은 true (boolean)

 

Model(모델)에 추가할 속성 이름과 Method(메서드)에 있는 파라미터 이름이 다를 경우 문자열로 입력하면 됩니다.

@ModelAttribute("searchInfo") BoardSearch boardSearch

또는 name이나 value를 사용하면 됩니다.

@ModelAttribute(name="searchInfo") BoardSearch boardSearch

or

@ModelAttribute(value="searchInfo") BoardSearch boardSearch

 

Model(모델)의 속성으로 추가하지 않는다면 false로 설정합니다. 기본적으로 true이기 때문입니다.

@ModelAttribute(binding=false) BoardSearch boardSearch

 

 

Maven Spring Project의 Controller의 Method에서 @ModelAttribute Annotation으로 데이터 받기

 

1. Java Resource > src/main/java > com.home.study.test1.main.controller에서 MainController 클래스를 오픈합니다. (MainController.java)

 

2. mainIndex 메서드에서 BoardSearch 객체에 @ModelAttribute Annotation 추가하여 파라미터의 데이터를 가져옵니다.

1. mainIndex 메서드에서 BoardSearch 객체에 @ModelAttribute Annotation를 추가합니다.

package com.home.study.test1.main.controller;

import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;

import com.home.study.test1.board.model.Board;
import com.home.study.test1.board.model.BoardSearch;
import com.home.study.test1.board.service.IBoardService;

@Controller
public class MainController {

	@Autowired
	IBoardService boardService;

	@RequestMapping("/index")
	public String mainIndex(@ModelAttribute("boardSearch") BoardSearch boardSearch, ModelMap model) {
		String searchType = boardSearch.getSearchType();
		if (searchType.isEmpty()) {
			searchType = "subject";
		}
		
		String searchCondition = boardSearch.getSearchCondition();
		if (searchCondition.isEmpty()) {
			searchCondition = "equal";
		}
		
		String searchKeyword = boardSearch.getSearchKeyword();
		searchKeyword = searchKeyword.trim();
		
		List<Board> boardList = boardService.selectBoardList(boardSearch);
		model.addAttribute("boardList", boardList);
		return "main/main";
	}

 	@RequestMapping("/default")
 	public String defaultIndex(HttpServletRequest request, HttpServletResponse response, ModelMap model) {
		List<String> memberIDList = new ArrayList<String>();
		memberIDList.add("testid1");
		memberIDList.add("testid2");
		memberIDList.add("testid3");
		memberIDList.add("testid4");
		memberIDList.add("testid5");
		model.addAttribute("memberList", memberIDList);
		return "main/main";
	}

}

 

 

Maven Spring Project를 실행하여 웹 브라우저로 확인하기

 

1. "Servers"탭에서 "Tomcat9"를 선택하고 "start"버튼(start the server)을 클릭하면 Tomcat이 실행됩니다.

 

2. 웹 브라우저에서 "http://localhost:9000/index.do"를 입력하고 검색 타입은 "제목", 검색 조건은 "포함", 검색 키워드는 "테스트 제목 1"을 입력한 후 검색 버튼을 누릅니다.

 

이제 @ModelAttribute Annotation(어노테이션)으로 추가된 boardSearch 속성을 사용하여 <form> 태그에 있는 <select> 태그와 <input> 태그에 값이 유지되도록 처리하겠습니다.

 

 

Maven Spring Project의 main.jsp에서 검색 UI에 Model(모델) 적용하기

 

1. /src/main/webapp/WEB-INF/views/main/main.jsp 파일을 오픈합니다.

 

2. <form> 태그에 있는 <select> 태그와 <input> 태그에 Model(모델)을 사용하여 값을 처리합니다.

1. JSTL의 if 문을 사용하여 boardSearch.searchType에 따라 searchType <select> 태그의 <option>에 selected 속성을 추가합니다.
2. JSTL의 if 문을 사용하여 boardSearch.searchCondition에 따라 searchCondition <select> 태그의 <option>에 selected 속성을 추가합니다.
3. searchKeyword <input> 태그의 value 속성에 boardSearch.searchKeyword을 입력합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>게시판</title>
		<style>
			.board { width:800px; margin: 20px auto; }
			.board table { width:100%; border-top:2px solid #1d4281; border-spacing:0; }
			.board table thead th { padding:8px 10px 10px 10px; vertical-align:middle; color:#1d4281; font-size:14px; border-bottom:1px solid #ccc; background:#f8f8f8; }
			.board table tbody td { padding:7px 10px 9px 10px; text-align:center; vertical-align:middle; border-bottom:1px solid #ccc; font-size:14px; line-heighT:150%; }
			.board table tbody td:nth-child(2) { text-align:left;}
			.board form { margin-bottom: 10px; }
			.board form select { padding: 4px 4px; }
			.board form input[type="text"] { padding: 4px 4px; width: 200px; }
		</style>
	</head>
	<body>
		<div class="board">
			<form action="/index.do" method="post">
				<select name="searchType">
					<option value="subject" <c:if test="${boardSearch.searchType == 'subject'}">selected="selected"</c:if>>제목</option>
					<option value="subjectandcontent" <c:if test="${boardSearch.searchType == 'subjectandcontent'}">selected="selected"</c:if>>제목+내용</option>
				</select>
				<select name="searchCondition">
					<option value="equal" <c:if test="${boardSearch.searchCondition == 'equal'}">selected="selected"</c:if>>일치</option>
					<option value="like" <c:if test="${boardSearch.searchCondition == 'like'}">selected="selected"</c:if>>포함</option>
				</select>
				<input name="searchKeyword" placeholder="검색할 키워드를 입력하세요." type="text" value="${boardSearch.searchKeyword}">
				<input type="submit" value="검색">
			</form>
			<table>
				<colgroup>
					<col style="width:10%">
					<col style="width:*">
					<col style="width:15%">
					<col style="width:25%">
				</colgroup>
				<thead>
					<tr>
						<th scope="col">번호</th>
						<th scope="col">제목</th>
						<th scope="col">작성자</th>
						<th scope="col">작성일</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach var="boardItem" items="${boardList}" varStatus="status">
					<tr>
						<td>${fn:length(boardList) - status.count + 1}</td>
						<td>${boardItem.subject}</td>
						<td>${boardItem.registrationId}</td>
						<td>${boardItem.registrationDateTime}</td>
					</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
	</body>
</html>

 

 

Maven Spring Project를 실행하여 웹 브라우저로 확인하기

 

1. "Servers"탭에서 "Tomcat9"를 선택하고 "start"버튼(start the server)을 클릭하면 Tomcat이 실행됩니다.

 

2. 웹 브라우저에서 "http://localhost:9000/index.do"를 입력하고 검색 타입은 "제목", 검색 조건은 "포함", 검색 키워드는 "테스트 제목 2"를 입력한 후 검색 버튼을 누릅니다. 그러면 전달된 값으로 검색 UI의 데이터가 유지되는 것을 확인할 수 있습니다.