Thymeleaf 에 대한 설명은 이전에 포스팅을 한 적이 있다. spring 공식홈페이지에서 설명하고 있는 템플릿엔진이라 관심이 가게 되었고, 홈페이지 하나를 Thymeleaf 로 만들어 보았는데 확실히 장점이 많다. 좀 찾아보고 공부했었던, 텍스트 조립하는 방법과 조건문을 정리해본다.
Appending texts
텍스트끼리 이어붙이는 연산자는 어디나 그렇듯 + 연산자를 사용한다. + 연산자를 사용하려면 'abc' + 'def' 과 같이 홑따옴표를 사용해가면서 더해줘야 하는데, 조금 더 편하게 사용할 수 있는 방법이 있다. | 를 사용하면 그 안에 내용은 템플릿처럼 인식하고, 그 안의 변수를 지정하면 + 연산자 없이도 붙어서 나오게 된다.
[Text operations]
String concatenation: +
Literal substitutions: |The name is ${name}|
예를 들어, html 파일에서 아래와 같이 th:id 를 동적으로 만들기 위해 뒤에 $(count) 변수를 덧붙이면, 값에 따라 id 를 다르게 지정할 수 있다.
<!-- 적용전 -->
<input class="form-control" type="text"
th:id="'parentsTel' + ${count}">
<!-- 적용후 -->
<input class="form-control" type="text"
id="parentsTel1">
| 를 사용하면 홑따옴표 없이도 쉽게 조립이 가능해진다.
<!-- 적용전 -->
<input class="form-control" type="text"
th:id="|parentsTel${count}|">
<!-- 적용후 -->
<input class="form-control" type="text"
id="parentsTel1">
Conditional expressions
조건문은 아래와 같은 표현식으로 사용하면 된다.
Conditional operators:
If-then: (if) ? (then)
If-then-else: (if) ? (then) : (else)
첫 번째 row 만 입력체크를 필수로 하고, 버튼을 비활성화 하고 싶어서 만든 로직이다. disable, required 같은 문법마다, th: 가 붙은 문법이 다 각각 존재한다. 거기에 조건을 걸어 로직을 넣으면 완성도 있는 폼(FORM) 입력화면을 만들 수 있다.
<select class="form-select"
th:required="(${index} == 0)? true:false">
<button type="submit"
th:disabled="(${index} == 0) ? true:false"></button>
<!-- index == 0 일때, -->
<select class="form-select" required="required">
<button type="submit" disabled="disabled"></button>
<!-- index == 0 이 아닐때, -->
<select class="form-select">
<button type="submit"></button>
Default expressions
이 문법은 아직 안써보긴 했는데, 변수값이 null 일때, 기본값으로 출력하기 위한 문법이다.
Default: (value) ?: (defaultvalue)
아래 예시의 age 변수에 값이 null 이면, (no age specified) 텍스트가 나오게 될 것이다.
<p>Age: <span th:text="*{age}?: '(no age specified)'">27</span>.</p>