타임리프2

타임리프특징

1) 스프링부트에서 추천하는 템플릿엔진

2) HTML로 템플릿을 작성하기때문에 웹브라우저로 파일의 내용을 표시하고 확인하며 뷰를 만들수있다.

3) 스프링부트 기본설정으로 src/main/resources/templates폴더아래에 요청핸들러 메소드의 return값 + .html파일이 참조된다.

 

타임리프 사용법

1. 직접 문자를 삽입

직접 설정한 문자를 출력할때에는 th:text=" 출력문자  " 로 문자를 출력할수 있다. 또 출력문자 부분에는 타임리프 독자문법인 ${ } 를 사용할수 있다. 속성값 설정에 "(큰따옴표) 를 사용하므로 문자를 설정할때는 '(작은따옴표)로 둘러싼다

< h1 th:text=" 'hello world' "> 

 

2. 인라인 처리

[[ ${} ]] 를 사용하면 태그를 속성에 추가하는 대신 본문에 변수를 포함할 수 있다. 고정값과 변수를 조합하고 싶은경우 이 방법을 쓰면 편리하다.

<h1> hello! [[${name}]] sir 

 

3. 값 결합

+를 이용해서 값을 결합할수있다.

<h1 th:text=" ' 오늘의날씨는 ' + '맑음' "> 

 

4. 값결합(리터럴치환)

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

< th:text="|안녕하세요 ${name} 씨|">

 

5. 지역변수

th:with="변수 이름 = 값"으로 변수에 값을 할당할수있다. 변수의 범위는 정의된 태그 내부에서만 사용할수 있다. 또 산술연산자도 사용할수있다.

<div th:with="a=1, b=2"> <태그종류 (span이나 등등) th:text="|${a} + ${b} = ${a+b}| ">

 

6. 비교와 등가 

비교와 등가 연산자도 사용할수있다. 문자열 비교도 가능하다.

7. 조건연산자도 사용가능하다. 

삼항연산자 조건 ? 값 1 : 값2 ▶ 조건이 true면 값1, 조건이 false면 값2가 출력된다. 

th:text=${name} == 'abc'? 'true' : 'false' ">

 

8. 조건분기(true/ false)

true:  <태그명 th:if="${name} == '가나다' "> <자식태그명> 참이다!</ >

th:if="조건" 에서 true일경우 th:if에서 작성한 태그와 자식요소를 표시한다.

 

false: <부모태그 th:unless="${name} == '홍길동' "> <자식태그 > 거짓이다</ >

th:unless="조건" 에서 false일경우 th:unless 에서 작성한태그와 자식요소를 표시한다.

 

9. switch

부모요소의 th:switch값과 자식요소에 작성하는th:case값이 동일한경우 HTML요소를 출력한다. 어떤 값도 일치하지 않는 값을 출력하는경우 th:case="*"를 지정한다.

<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>

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

캡슐화된 필드를 참조하는 경우 public 접근제한자의 get___ ()라는 게터 메소드를 작성하여 '객체명.필드' 형식으로 참조할수있고, '객체명[ '필드' ] ' 와 같이 대괄호로도 참조할수있다.

<p th:text="${mb.id}">ID</p>
<p th:text="${mb['id']}">ID: []로 접근</p>

11. 참조 (th:object)

데이터를 저장한 객체를 th:object에 설정하고, 자식요소에서 *{필드명} 으로 사용한다.

<div th:object="${mb}">
    <p th:text="*{id}">ID</p>
    <p th:text="*{['id']}">ID: []로 접근</p>

12. 참조(List)

List나 배열의 요소를 참조할때는 인덱스 번호를 입력해서 참조한다.

<p th:text="${list[0]}">인덱스로참조</p>

 

13. 참조(Map)

Map요소를 참조하려면 '키'를 이용해 참조한다. map.key형식으로도 참조할수있고, map[ 'key' ]와 같은 형식으로 참조할수있다.

<p th:text="${map.lee.name}">이름 2</p>
<p th:text="${map['kim']['name']}">이름 1 : []로 접근</p>

14. 반복

th:each=" 요소 저장용 변수 : ${ 반복처리하는 객체} " 로 반복처리할수있다. 요소저장용 변수는 반복처리중에만 유효하다. Iterable 인터페이스를 구현한 클래스라면 th:each로 반복처리할수있다. 향상된 for문같은 개념

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

15. 반복상태

th:each " 요소저장용변수  , 상태변수 : 반복처리할객체 " 와 같이

        요소 저장용 변수의 선언 다음에 상태변수를 선언하여 반복상태를 유지한 상태변수를 사용할수있다.

반복상태변수

○ index : 0부터 시작하는 인덱스 , 현재 인덱스를 표시한다.

○ count : 1부터 시작하는 인덱스, 현재 인덱스를 표시한다.

○ size : 반복처리하는 객체의 사이즈를 표시한다.

○ current : 현재 반복요소의 객체를 표시한다.

○ even : 현재 요소가 짝수번째인지 결정한다 짝수면 true, 홀수면 false표시

○  odd : even의 반대

○ first : 현재 요소가 첫번째 요소인지 여부를 결정한다. 첫번째면 true, 아니면 false표시

○ last: 현재 요소가 마지막 여부인지 결정한다. 마지막이면 true, 아니면 false표시

<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>

16. 유틸리티 객체

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

데이터를 출력할때 자주 이용되는것은 수치, 일시, 문자열의 포맷변환이다.

유틸리티객체들

○ #strings : 문자관련편의기능 -- 문자열길이와 대소문자 변환과 같은 String클래스와 유사한 메소드 제공

○ #numbers : 숫자 서식지원

○ #bools : boolean관련기능

○ #dates : java.util.date관련기능

○ #objects : 객체 관련기능

○ #arrays : 배열관련

○ #lists : 리스트관련

○ #set : 셋관련(컬렉션의 set)

○ #maps: 맵관련기능

정숫값 형식변환은 #numbers.formatInteger()  사용한다. 쉼표사용할땐 'COMMA' 사용하고 소수점을쓸땐 'POINT' 를 쓴다.

정수 형식:
        <span th:text="${#numbers.formatInteger(x, 3, 'COMMA')}"></span>
        <br/>
    부동 소수점 형식:
        <span th:text="${#numbers.formatDecimal(y, 3, 'COMMA', 2,'POINT')}"></span>

날짜의 ㅍ포맷변환을 위해 현재 날짜를 취득하거나 연원일 요일을 취득하는 메소드가 제공된다. createNow()메소드를 이용하면 현재날짜와 시간을 구할수있다. 

format()메소드에는 날짜가 담긴 변수와 퐷변환 문자열을 지정한다. year, month, day() 메소드에는 날짜가 담긴 변수를 인수로 전달해서 '연, 월, 일' 을 취득할수있고, dayOfWeek()메소드는 요일을 나타내는 정수를취득할수있다.(일~토까지 1~7)

 

17. 다른 템플릿 삽입하기

프래그먼트(fragment)화 란 여러 템플릿에서 같은 내용이 사용되는 경우 공통내용을 별개의 파일로 만들고 필요한 부분에 추가하는것을 말한다. 

프레그먼트 사용법은 

fragment.html에 공통 내용을 작성하고, useThymeleaf.html에 공통내용을 가져와 출력하는 부분을 작성한다. 

프레그먼트를 이용하려면 th:fragment속성을 이용한다. 속성을 지정한 요소 내의 자식요소가 프래그먼트 대상이 된다. 속성에는 프레그먼트를 식별할 이름을 지정한다.

<span th:fragment="one">하나</span>
<span th:fragment="two">둘</span>
<span th:fragment="three">셋</span>

프레그먼트를 삽입할때는 th:insert속성을 이용한다.

'::' 의 왼쪽에 프레그먼트 파일명을 오른쪽에 th:fragment속성에 앞에서 정의한 프레그먼트 이름을 지정한다. 

전체 내용을 프레그먼트로 완전히 바꾸려면th:replace속성을 이용한다.

<div id="one" th:insert="fragment :: one"></div>
<div id="three" th:replace="fragment :: three"></div>

th:insert의 경우는 삽입되는useThymeleaf.html의 태그안에 삽입대상 fragment.html의 태그내용(th:fragment를 부여한태그의 자식요소)가 삽입된다. 

th:replace의 경우 삽입대상fragment.html의 대트 전체(th:fragment를 부여한태그 전체)로 대체된다.

 

---

레이아웃

레이아웃화란 여러 템플릿에서 같은 디자인레이아웃을 사용하는 경우 공통레이아웃을 만들고 공유하는것 을 말한다. 레이아웃을 이용하려면 전용 라이브러리인 thymeleaf-layout-dialect 가 필요하다.

Thymeleaf Layout Dialect에서는 공통 레이아웃을 Decorator라 하고 공통레이아웃을 이용하는 측을 Fragment라 정의한다.

Thymeleaf Layout Dialect 라이브러리를 이용할때 전체 화면을 타임리프의 변환처리후 확인할수 있다는 단점이 있긴하다.