타임리프와 모델 인터페이스

타임리프는 스프링 부트에서 사용을 권장하는 템플릿 엔진이다.

 

장점	설명
HTML 기반으로 사용하기 쉬움	타임리프는 HTML 을 기반으로 하기 때문에 HTML 과 크게 다르지 않습니다. 특별한 코드를 작성해서 페이지에 동작을 부여하거나 데이터를 표시할 수 있습니다.
동적 페이지 생성	조건부 분기(만약 ~이면 XX를 표시), 반복(XX를 여러번 표시) 등 프로그래밍의 기본 기능을 사용해 동적인 휍 페이지를 만들 수 있습니다.
내추럴 템플릿	타임리프는 '네추럴 템플릿'이라고도 부릅니다. 이는 템플릿을 그대로 HTML 로 볼 수 있다는 뜻입니다. 이를 통해서 디자이너는 특별한 도구 없이도 템플릿을 확인할 수 있습니다.
디자이너와의 분업이 쉬움	타임리프의 템플릿은 브라우저에 그대로 볼 수 있습니다. 이를 통해 디자이너와 프로그래머가 동시에 작업을 수행할 수 있습니다.

 

타임리프의 가장 특 장점은 디자이너와의 분업을 쉽게 할수있는 점입니다. 

 

Model 인터페이스란 데이터를 웹페이지에 표시하기 위한 전달도구라고 할수 있습니다.

특징	내용
데이터 전달자	Model 은 프로그램에서 처리한 데이터를 웹 페이지(뷰)에 표시하기 위해 사용합니다. 즉, 데이터를 뷰에 전달하는 '전달자'와 같은 역할을 합니다.
자동 관리	스프링 MVC가 Model 을 자동으로 관리해 줍니다.
간편한 사용법	Model 을 사용할 때는 함수(요청 핸들러의 메서드)의 인수에 Model 타입을 지정하기만 하면 스프링 MVC 가 알아서 설정해 줍니다.

 

중요 메서드

// 사용법 
addAttribute(String 저장할 객제의 이름, Object 저장할 값);

// 사용예
model.addAttribute("msg", "메시지");

 

타임리프 사용법

 

1. 직접 문자 삽입하기

<!-- 01: 직접 문자를 삽입 -->
<h1 th:text="'hello world'">표시할 부분</h1>

 

2. 인라인 처리

<!-- 02: 인라인 처리 -->
<h1>[[${name}]] 님 안녕하세요!</h1>

 

3. 값 결합

<!-- 03: 값 결합 -->
<h1 th:text="'내일은 '  '맑음 ' + '입니다.'">표시할 부분</h1>

 

4. 값 결합(리터럴 치환) -- 리터럴 치환이란 소스코드에서 특정한 자료형의 값을 직접 표현하는 방식

<!-- 04: 값 결합(리터럴 치환) -->
<h1 th:text="|${name} 님, 안녕하세요!|">표시할 부분</h1>

 

5. 지역 변수

<!-- 05: 지역 변수 -->
<div th:with="a=1, b=2">
	<span th:text="|${a} + ${b} = ${a+b}|"></span>
</div>

with="변수명 = 값" 으로 변수에 값을 대입할 수 있습니다.

 

6. 비교와 등가

<!-- 06: 비교와 등가 -->
<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="철수 == 철수"></span>
<span th:text="철수 != 철수"></span>

 

7. 조건 연산자

<!-- 07: 조건 연산자 -->
<p th:text="${name} == '철수' ? '철수입니다!' : '철수가 아닙니다.'"></p>

 

8. 조건부 분기(true)

<!-- 08: 조건부 분기(true) -->
<div th:if="${name} == '철수'">
	<p>철수입니다!</p>
</div>

 

9. 조건부 분기(false)

<!-- 09: 조건부 분기(false) -->
<div th:unless="${name} == '영희'">
	<p>영희가 아닙니다.</p>
</div>

 

10. switch

<!-- 10: switch -->
<div th:switch="${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>

 

11. 참조(데이터를 모아놓은 객체)

<!-- 11: 참조(데이터를 모아놓은 객체) -->
<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>

 

12. 참조(th:object)

<!-- 12: 참조(th:object) -->
<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>

 

13. 참조(List)

<!-- 13: 참조(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>

 

14. 참조(Map)

 

<!-- 14: 참조(Map) -->
<p th:text="${map.minsso.name}">이름1</p>
<p th:text="${map.jisoo.name}">이름2</p>
<p th:text="${map['minsoo']['name']}">이름1 : [] 로 접근</p>
<p th:text="${map['minsso']['name']}">이름2 : [] 로 접근</p>

 

15. 반복

<!-- 15: 반복 -->
<div th:each="member:${members}">
	<p>[[${member.id}]]: [[${member.name}]]</p>
</div>

 

16. 반복 상태

<!-- 16: 반복 상태 -->
<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>