제 6장 템플릿 엔진 알아보기
6.1 템플릿 엔진의 개요
6.1.1 템플릿 엔진 이란 ?
뷰( View ) 는 사용자에게 보여줄 내용을 처리 결과 데이터를 가지고 HTML을 생성해서 클라이언트에 응답을 돌려주는 역할을 한다. 템플릿 엔진은 데이터를 미리 정의된 템플릿에 바인딩해서 뷰의 표시를 도와주는 것 이다.
6.1.2 타임리프 ( Thymeleaf ) 란 ?
- HTML 기반의 템플릿 엔진으로, 정해진 문법으로 작성하면 페이지를 동적으로 조립해준다.
- HTML 을 기반으로 하기 때문에 최종 출력을 생각하면서 뷰를 만들 수 있다.
6.2 Model 인터페이스의 사용법
6.2.1 Model 인터페이스 란 ?
- 처리한 데이터를 뷰에 표시할 경우 데이터를 전달하는 역할
- 스프링 MVC에 이해 관리되며, 수동 또는 자동으로 객체를 저장하고 관리하는 기능을 제공한다.
- Model을 이용할 때 요청 핸들러 메서드의 인수에 Model 타입을 전달한다.
기억해야 할 중요한 메서드 addAttribute
특정 이름에 대해 값을 설정하는 메서드. 저장하고 싶은 값에 별명을 붙인다. 뷰에서는 별명에 사용한 이름을 이용한다.
Model addAttribute(String name, Object value)
- name 이름 ( 별명 )
- value 값 ( 저장하고 싶은 객체 )
6.2.2 Model 사용하는 프로그램 만들기
Dependencies 에 Thymeleaf 를 추가해야한다.
Controller 만들기
@Controller
@RequestMapping("hello")
public class HelloModelController {
@GetMapping("model")
public String helloView(Model model) { // Model 인터페이스 사용 요청 Model 타입 전달
// Model 에 데이터를 저장
model.addAttribute("message", "타임 리프!");
// 반환 값으로 뷰 이름을 돌려줌
return "helloThymeleaf";
}
}View 만들기
helloThymeleaf.html 파일
<!DOCTYPE html>
<!-- 타임리프 사용 선언 -->
<html xmlns:th="http://www.thymeleaf.org"> // 타임리프 기능은 'th:xxx속성명' 형식으로 입력
<head>
<meta charset="UTF-8">
<title> Hello Thymeleaf </title>
</head>
<body>
<!-- 추가 -->
<h1 th:text="${message}">표시되는 부분</h1>
</body>
</html>6.3 타임리프 사용법
6.3.1 타임리프 기능
직접 문자 삽입하기
th:text=" [출력 문자] " 로 문자 출력할 수 있다. [출력 문자] 부분에는 타임리프 문법인 '${}' 로 사용 가능하다.
값 결합하기
<h1 th:text="'오늘 날씨는' + '맑음' + '입니다'"> 표시하는 부분 </h1>값 결합하기 ( 리터럴 치환 )
<h1 th:text="|안녕하세요 ${name} 씨|"> 표시하는 부분 </h1>리터럴 치환을 사용하는 것으로 "|문자|"로 사용할 수 있다.문자 안에 '${}' 도 사용 가능하다.
지역 변수
<div th:with="a=1, b=2">
<span th:text="|${a} + ${b} = ${a + b}|"></span>
</div>th:with="변수 이름 = 값" 으로 변수에 값을 할당할 수 있다. 또한 산술 연산자도 사용 가능하다.
비교와 등가
비교 등가 연산자인 >, <, >=, <=, ==, != 를 사용할 수 있다.
조건 연산자
<p th:text="${name} == '길동' ? '길동입니다!' : '길동이가 아닙니다'"></p>삼항 연산자 ( [조건] ? [값 1] : [값 2] ) 를 사용할 수 있다.
조건 분기 ( true / false )
<div th:if="${name} == '길동'">
<p> 길동 씨 입니다. </p>
</div>th : if = " [조건] " 에서 true 일 경우 th:if 에 작성한 자식 요소를 표시한다.
if 가 unless 가 되면 false 일 경우
참조 ( 데이터를 결합한 객체 )
<p th:text="${mb.id}">ID</p>
<p th:text="${mb.name}">이름</p>
<p th:text="${mb.['id']}">ID: []로 접근</p>
<p th:text="${mb.['name']}">이름: : []로 접근</p>캡슐화된 필드를 참조하는 경우 public 접근 제한자의 getXxx() 라는 getter 메서드를 작성하여 '객체명.필드' 형식으로 값을 참조할 수 있다.
참조 (th:object)
<div th:objecrt="${mb}">
<p th:text="${mb.id}">ID</p>
<p th:text="${mb.name}">이름</p>
<p th:text="${mb.['id']}">ID: []로 접근</p>
<p th:text="${mb.['name']}">이름: : []로 접근</p>
</div>데이터를 저장한 객체를 'th:object' 에 설정하고 자식 요소에서 '*{필드명}'으로 사용한다.
참조 ( List )
<p th:text="${list[0]}">방위</p>
<p th:text="${list[1]}">방위</p>
<p th:text="${list[2]}">방위</p>
<p th:text="${list[3]}">방위</p>List 나 배열 요소 참조할 때 인덱스 번호를 입력해서 참조가 가능하다.
참조 ( Map )
<p th:text="${map.kim.name}">이름 1</p>
<p th:text="${map.lee.name}">이름 2</p>
<p th:text="${map['kim']['name']}">이름 1 : []로 접근</p>
<p th:text="${map['lee']['name']}">이름 2 : []로 접근</p>Map 요소는 Key 값을 이용하여 참조, 'map.key' 형식으로도 참조할 수 있다. 또는 map['key'] 와 같이 대괄호를 사용해 참조할 수도 있다.
반복
<div th:each="member : ${members}">
<p>[[${memer.id}]] : [[${member.name}]]</p>
</div>th : each = " [요소 저장용 변수] : ${[ 반복 처리하는 객체 ]} " 로 반복 처리할 수 있다.
반복 상태
<div th:each="member, s : ${members}" th:object="${member}">
<p>
index-> [[${s.index}]], count-> [[${s.count}]],
size-> [[${s.size}]], current-> [[${s.current}]],
even-> [[${s.even}]], odd-> [[${s.odd}]],
first-> [[${s.first}]], last-> [[${s.last}]],
[[*{id}]] : [[*{name}]]
</p>
</div>th:each="[요소 저장용 변수], [상태 변수] : [반복 처리할 객체]" 와 같이 [요소 저장용 변수] 다음에 [상태 변수] 를 선언하여 반복 상태를 유지한 상태 변수를 사용할 수있다.
| 상태 변수 | 기능 개요 |
|---|---|
| index | 0부터 시작하는 인덱스, 현재 인덱스를 표시 |
| count | 1부터 시작하는 인덱스, 현재 인덱스를 표시 |
| size | 반복 처리하는 객체의 사이즈를 표시 |
| current | 현재 반복 요소의 객체를 표시 |
| even | 현재 요소가 짝수인지 여부 결정 짝수는 true, 아니면 false |
| odd | 현재 요소가 홀수인지 여부 결정 홀수는 true, 아니면 false |
| first | 현재 요소가 첫번째인지 여부 결정 첫번째면 true, 아니면 false |
| last | 현재 요소가 마지막인지 여부 결정 마지막이면 true, 아니면 false |
