타임리프 - 기본기능(2)

URL 링크

단순한 URL

@{/hello} -> /hello

 

메뉴얼

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#link-urls

---

리터럴

리터럴은 소스 코드상에 고정된 값을 말하는 용어이다.

String a = "Hello"

int a = 10 * 20

"Hello"는 문자 리터럴, 10과 20은 숫자 리터럴이다.

 

타임리프에서 문자 리터럴은 항상 ' ( 작은 따옴표 ) 로 감싸야 한다.

<span th:text = " ' hello ' " >

공백 없이  쭉 이어진다면 하나의 토큰으로 인지해서 작은 따옴표를 생략할 수 있다.

<span th:text = " hello " >

---

연산

비교연산 : HTML 엔티티 사용만 조심

조건식 : 자바와 동일

Elvis 연산자 : 조건식의 편의 버전

No-Operation : _ 인 경우 타임리프 실행하지 않는 것처럼 동작 가능

---

속성 값 설정

타임리프는 주로 HTML 태그에 th:+ 속성을 지정하는 방식으로 동작한다.

 

속성 설정

th:+ 로 속성을 적용하면 기존 속성을 대체한다. 기존 속성이 없으면 새로 만든다.

 

속성 추가

th:attrappend : 속성 값의 뒤에 값을 추가

th:attrprepend : 속성 값의 앞에 값을 추가

th:classappend : class 속성에 자연스럽게 추가

 

checked 처리

HTML에서는 checked 속성만 있으면 -> checked 처리를 해버린다.

타임리프의 th:checked="false"로 하면 checked의 처리를 제거한다.

---

반복

<tr th:each="user" : ${users}">

th:each를 사용한다.

List뿐만 아니라 배열, Iterable, Enumeration을 구현한 모든 객체에 가능하다. Map도 가능.

 

반복 상태 유지 기능 userStat

index, count, size, even, odd, first, last, current 등 다양한 기능 제공

---

조건부 평가

if, unless(if의 반대)

th:if    th:unless

 

switch

<td th:switch="${user.age}">

<span th:case="10">10살</span>

---

주석

1. 표준 HTML 주석

<!--    -->

2. 타임리프 파서 주석

<!-- /*   */-->

3. 타임리프 프로토타입 주석 (타임리프 렌디링시에만 주석x)

<!--/*/   /*/-->

---

블록

<th:block>은 HTML 태그가 아닌 타임리프의 유일한 자체 태그다. 

block을 사용하면 원하는 block 만큼 th:each로 반복할 수 있다.

---

자바스크립트 인라인

타임리프는 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다.

<script th:inline="javascript">

---

템플릿 조각

웹 페이지를 개발할 때는 공통 영역이 많이 있다. 예를 들어서 상단 영역이나 하단 영역, 좌측 카테고리 등등 여러 페이지에서 함께 사용하는 영역들이 있다. 이런 부분을 코드를 복사해서 사용한다면 변경시 여러 페이지를 다 수정해야 하므로 상당히 비효율 적이다. 타임리프는 이런 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원한다.

 

template/fragment/footer :: copy 는 template/fragment/footer.html 템플릿에 있는 th:fragment="copy" 라는 부분을 템플릿 조각으로 가져와서 사용한다는 의미이다.

 

th:insert는 현재 태그 div 내부에 추가하고

th:replace는 현재 태그 div를 대체한다.

---

인프런 김영한님의 스프링 MVC 2편을 듣고 작성한 글입니다.

https://inf.run/oKtV

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의