1. 전역 변수 Assign은 어떻게?
<body th:with="str='str',num=1,num2=2">
문자열 입력 시, 필히 quote로 묶어주어야 한다.
2. 페이지 Include는?
<div th:include="include1">
.html은 생략할 수 있으며, 모든 예제가 div로 되어 있어서 div를 넣을 지 말지 많이 고민했는데,
thymeleaf는 freemarker와는 다르게 어쩔 수 없이 하나의 태그가 포함되어야 하므로,
적당히 div를 통해 묶어주던가 css를 조작하여 페이지에 최대한 영향이 없는 태그를 넣는다.
그것도 싫다면 th:block을 사용하면 된다! (이게 더 좋을듯)
<th:block th:include="include1">
3. 조건문 사용 시 || 나 && 사용이 불가능함.
<div th:if="${abc} == 1 or ${abc} == 2">
영어로 작성해주어야 한다. 물론 &&는 and로 적어야 함.
4. Loop는 어떻게 할까?
<ul th:each="v : ${values}">
<li th:id="${v.id}">
</ul>
include와 마찬가지로 freemarker처럼 html 포맷을 무시한 태그들 중앙에 loop을 돌릴 순 없고, 태그 하나가 필요하다.
사용법은 freemarker와 크게 다르진 않다.
5. 값이 없는 경우 다른 값으로 대체 하기
<input th:value="${abc != null} ? ${abc} : 123">
일반적인 프로그래밍 언어에서 지원하는 3항 연산자가 가능! 하지만 freemarker보다 불편한건 함정
조건문을 중괄호로 전부 묶어주는게 포인트다.
6. thymeleaf로 전환하니깐 IDE에서 계속 노란불(Warning)이 들어오는 경우.
<html xmlns:th="http://www.thymeleaf.org">
사실 무시해도 되는 Warning인데, 성격상 노란불 들어오는 것을 용납을 못하기 때문에 찾아봤다.
상단에 저렇게만 추가해줘서, html에게 th가 뭔지만 알려주면 된다.
7. onclidk 이벤트에 javascript:xxxxx('${abc}') 형태로 문자열 연결을 하려는데 타입이 다른 변수들은 연결할 수 없다고 에러가 나는데 어케함?
<button type="button" th:onclick="javascript:send([[${abc}]])">send click!!</button>
사실 전부 문자열인데, 왜 에러가 나는 지 이해가 잘 안됐고, 문자열과 변수를 묶어줄 때 사용하는 | 도 먹히질 않았음.
저렇게 대괄호로 변수 부분만 묶어주면, quote도 알아서 들어가고 심플하다.
드디어 구닥다리 freemarker에서 벗어나 thymeleaf로 오게 되었음.
바꾸고 나니깐 뭔가 렌더링도 더 빨라진 느낌이다.
