Thymeleaf - 메서드명 접근 / th:object / th:href(Query String 전송) / th:switch / List<Map<String,String>> / #numbers.sequence / javascript 변수 지정 (/*[[]]*/)

Thymeleaf 문법 2번째 시간입니다.

 

바로 알아보러 갈게요.

 

Class 메서드명, 메서드의 변수명 접근(is, get)

public class MemberVO implements Serializable{
	public boolean isNextPageGroup() {
		return true;
	}
    	public String register() {
		return "등록완료";
	}
}

MemberVO에 isNextPageGroup, register 메서드가 있습니다.

이러면 thymeleaf로 어떻게 불러올 수 있는지 확인해 볼까요?

  <span th:text="${member.nextPageGroup}">다음페이지그룹-변수명 접근</span>
  <span th:text="${member.isNextPageGroup()}">다음페이지그룹-메서드명 접근</span>
  <span th:text="${member.register()}">등록메서드-메서드명 접근</span>

String 값을 받아오니까 text로 받아올 수 있습니다. 

직접 메서드명을 다 찍어서 가져오거나(괄호까지 전부) 아니면 is 나 get이면 앞의 단어 생략하고 뒤에만 작성하면 가져올 수 있습니다.

 

th:object

다음은 객체를 결과 값으로 보내줄 때 어떻게 쉽게 받아오는지 알아보겠습니다.

@GetMapping("/study2")
public String study2(Model model) {
	model.addAttribute("member", new MemberVO("spring","a","네이마르","파리"));
	return "step02-form-object-expression";
}

MemberVO를 객체로 보내줍니다.

<form action="update" method="post" th:object="${member}">
<input type="text" name="id" placeholder="아이디" readonly="readonly" th:value="*{id}"><br>
<input type="text" name="password" placeholder="패스워드" required="required" th:value="*{password}"><br>
<input type="text" name="name" placeholder="이름" required="required" th:value="*{name}"><br>
<input type="text" name="address" placeholder="주소" required="required" th:value="*{address}"><br>
<button>수정하기</button>
</form>

form 태그 안에 th:object로 객체를 할당하고 (form 태그 말고 <th:block> 안에서 object 할당해도 동작됩니다)

th:value="*{인스턴스변수}" 이렇게 해서 값을 가져오면 됩니다.

 

th:href로 query string 보내기

<a href="/board/list?pageNo=7&keyword=spring" 
 th:href="@{/board/list(pageNo=${pageNo},keyword=${keyword})}">link href querystring test2</a>

query string 보내려면 괄호 안에 key값과 value 값을 넣고 여러 개의 조건이 있으면 comma를 찍고 더 작성하면 됩니다.

위에 작성한 url의 의미가 무엇이냐면

/board/list?pageNo=${pageNo}&keyword=${keyword}

이렇게 되는 것입니다.

 

th:switch

<th:block th:switch="${size}">
	<th:block th:case="L">
	<span>대</span>
	</th:block>
	<th:block th:case="M">
	<span>중</span>
	</th:block>
	<th:block th:case="S">
	<span>소</span>
	</th:block>
</th:block>

${size}에 들어갈 값이 L, M, S 중 하나이면 그 값에 맞춰서 span 태그가 생성될 것입니다.

 

그냥 List, List<Map<String,String>>

이것이 의미하는 것이 무엇인지 천천히 알아가 보아요.

@GetMapping("study6")
public String study6(Model model) {
	// db 즉 mybatis 를 통해 회원 리스트를 반환 받았다고 가정
	ArrayList<MemberVO> list = new ArrayList<>();
	list.add(new MemberVO("java", "a", "김진수", "전주"));
	list.add(new MemberVO("spring", "a", "조규성", "도르트문트"));
	list.add(new MemberVO("ajax", "a", "이강인", "마요르카"));
	model.addAttribute("memberList", list);
	// mybatis 연동해 model 에 memberMapList를 할당
	List<Map<String, String>> mapList = memberMapper.findAllMemberMapList();
	model.addAttribute("memberMapList", mapList);
	return "step06-loop-each";
}

1. memberList로 List 객체 보내주는 것 

2. memberMapList로 List Map 객체 보내주는 것 

이 두 가지 방법을 이용하여 값을 뽑아보겠습니다.

 

1. 첫 번째 방법은 저번 시간에 했던 방법입니다.

<tr th:each="member:${memberList}">
  <td th:text="${memberStat.count}">count</td>
  <td th:text="${member.id}">id</td>
  <td th:text="${member.name}">name</td>
  <td th:text="${member.address}">address</td>
</tr>

2. 두 번째 방법은 Map으로 값을 가져오기 때문에 인스턴스 변수의 값을 대문자로 받아와야 합니다. MyBatis에서 map을 그렇게 저장하기 때문입니다!

<tr th:each="memberMap:${memberMapList}">
  <td th:text="${memberMapStat.count}">count</td>
  <td th:text="${memberMap.ID}">id</td>
  <td th:text="${memberMap.NAME}">name</td>
  <td th:text="${memberMap.ADDRESS}">address</td>
</tr>

이런 식으로 대문자를 작성해야 값이 나옵니다.

 

#numbers.sequence (숫자 순차 배열)

<th:block th:each="num : ${#numbers.sequence(1,10)}">
	<span th:text="${num}">number</span>
</th:block>

th:each 반복문에 ${#numbers.sequence(처음 숫자, 끝 숫자)}

작성하면 완료입니다.

Javascript 변수 지정 (/*[[]]*/ "";)

<script type="text/javascript" th:inline="javascript">
	let memId=/*[[${param.id}]]*/ "회원아이디";
	let memName=/*[[${param.name}]]*/ "이름";
	alert("js test "+memId+" "+memName);
	location.href="/";
</script>

저런 괴상한 문자를 작성하고 ""를 작성해야지만 작동이 됩니다.

직접 해보면 바로 알 수 있습니다.

 

소감

문법 같은 경우에 저도 내용을 많이 찾아보곤 하는데 간단하게 작성해서 바로바로 사용할 수 있게 하는 것이 더 좋더라고요. 그래서 코드도 최대한 간결하게 남기려고 노력했고, 설명도 간결하게 작성했습니다.

글이 길어 보이면 우와... 정말 자세하다...라고 생각할 수도 있지만 때로는 으악! 내 눈  이러면서 도망갈 수도 있기 때문에 문법 같은 것은 좀 짧게 작성하려고 노력하겠습니다.

이제 곧 두 번째 프로젝트를 하게 되는데, 시작도 전에 많은 생각을 하게 됩니다. 인생지사 새옹지마라고 모두가 다 행복한 팀플 하면서 다 같은 곳으로 가고 싶다는 생각이 드는 하루네요.