템플릿 엔진

템플릿 엔진이란 데이터를 미리 정의된 템플릿에 바인딩 해서 뷰의 표시를 도와주는 것을 말한다. 

타임리프란 HTML 기반의 템플릿 엔진으로, 정해진 문법으로 작성하면 페이지를 동적으로 조립해 준다.

 

Model 인터페이스란 처리한 데이터를 뷰에 표시하고 싶을 경우 데이터를 전달하는 역할을 한다.

스프링 MVC 에 의해 관리되며, 수동 또는 자동으로 객체를 저장하고 관리하는 기능을 제공한다.

Model 을 이용하고 싶은 경우 요청 핸들러 메서드의 인수에 Model 타입을 전달한다. 그러면 스프링 MVC 가 자동으로 Model 타입 인스턴스를 설정한다.

 

Model 인터페이스 관련 중요 메서드

addAttribute	특정 이름에 대해 값을 설정한다	Model addAttribute(String name, Object value)
인수	name	이름(별명)
	value	값(저장하고 싶은 객체)

 

뷰를 생성한 후에 Model 인터페이스에 저장해 놓은 값을 뷰로 가져올수 있다

 

타임리프의 특징

• 스프링 부트에서 추천하는 템플릿 엔진이다.
• HTML 로 템플릿을 작성하기 때문에 웹 브라우저로 파일의 내용을 표시하고 확인하면서 뷰를 만들 수 있다.
• 스프링 부트의 기본 설정으로 src/main/resources/templates 폴더 아래에 '요청 핸들러 메서드의 반환값 + .html' 파일이 참조된다

 타임리프 사용법

 

1. 직접 문자를 삽입

<h1 th:text="'hello world'">표시하는 부분</h1>

 

2. 인라인 처리

<h1>안녕하세요![[${name}]]씨</h1>

3. 값 결합

<h1 th:text="|안녕하세요 ${name}씨|>표시하는 부분</h1>

값 결합은 리터럴 치환을 사용하는 것으로 "| 문자 |"로 기술할 수 있다. 문자 안에서 '${}' 표현 식도 함께 사용할 수 있다.

 

4. 지역변수

<div th:with="a=1, b=2">
	<span th:text="|${a} + ${b} = ${a + b}|"></span>
</div>

 

th:with="변수 이름 = 값" 으로 변수에 값을 할당할 수 있습니다. 변수의 범위는 정의된 태그 내부에서만 사용할 수 있습니다. 산술 연산자인 +, -, *, /, % 를 사용할 수 있습니다.

 

5. 비교와 등가

<span th:text="1 > 10 "></span>
<span th:text="1 < 10 "></span>
<span th:text="1 >= 10 "></span>
<span th:text="1 <= 10 "></span>
<span th:text="1 == 10 "></span>
<span th:text="1 != 10 "></span>
<span th:text="1 == 10 "></span>
<span th:text="1 != 10 "></span>

  

6. 조건  연산자

<p th:text="${name} == '길동' ? '길동입니다!' : '길동이 아닙니다'"></p>

자바의 삼항연산자를 타임리프에서도 사용가능하다

 

7. 조건분기

<div th:if="${name} == '길동'">
	<p>길동 씨입니다!</p>
</div>

<div th:if="${name} == '영희'">
	<p>영희씨가 아닙니다</p>
</div>

<div th:swich="${name}">
	<p th:case="길동" th:text="|${name}입니다!|"></p>
    <p th:case="영희" th:text="|${name}입니다!|"></p>
    <p th:case="철수" th:text="|${name}입니다!|"></p>
    <p th:case="*">명부에 없습니다</p>
</div>

 

8. 참조(데이터를 결합한 객체)

<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="${mb}">
	<p th:text="*{id}">ID</p>
    <p th:text="*{name}">이름</p>
    
    <p th:text="*{['id']}">ID</p>
    <p th:text="*{['name']}">이름</p>
</div>

 

9. 참조

<p th:text="${list[0]}">리스트[0]</p>
<p th:text="${list[1]}">리스트[1]</p>
<p th:text="${list[2]}">리스트[2]</p>
<p th:text="${list[3]}">리스트[3]</p>

<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']}">이름 1</p>

Map 요소를 참조하려면 키를 이용하여 값을 참조한다 'map.key' 형식으로도 참조할 수 있다

map['키'] 와 같이 대괄호를 사용해 참조할 수도 있다.

 

10. 반복

<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를 표시합니다.

 

유틸리티 객체 

타임리프에서는 자주 사용하는 클래스를 '#name' 이라는 상수로 정의하고 있어서 그대로 변수 표현식에 사용할 수 있다.

유틸리티 객체	기능 개요
#strings	문자 관련 편의 기능
#numbers	숫자 서식 지원
#bools	Boolean 관련 기능
#dates	java.util.Date 서식
#objects	객체 관련 기능
#arrays	배열 관련 기능
#lists	List 관련 기능
#sets	Set 관련 기능
#maps	Map 관련 기능