이번 포스트에서는 inline 형태로 Thymeleaf를 사용하는 방법에 대해 살펴보자.
inline style
inlie expression
기본적으로 Thyleleaf는 html 태그에 사용자 정의 속성을 이용해서 부가적인 기능을 추가한다. inline style은 사용자 정의 속성 없이 [[${...}]] 처럼 두 개의 대괄호 내에 표현식을 작성하는 방식이다.
<ul>
<li th:text="'제목:' +#{home.title}">property 사용</li>
<li th:text="'사용자: '+${user.name}">attribute 사용</li>
<li>제목: [[#{home.title}]]</li>
<li>사용자: [[${user.name}]]</li>
</ul>
만약 [[]] 자체를 사용해야 하는 경우에는 th:inline="none"을 이용해서 escape 시켜줘야 한다.
<p th:inline="none">A double array looks like this: [[1, 2, 3], [4, 5]]!</p>
inline 형식을 사용하면 코드가 좀 더 간단해 보일지는 모르지만 파일을 직접 실행했을 때 디자인 프로토타입을 확인할 수 없다는 단점이 있을 수 있다.
javaScript 작성
html.영역에서는 inline style과 그렇지 않을 때의 장/단점에 대해 이야기해 볼 수 있지만 javascript 영역에서는 선택권이 없다. 왜냐면 javascript 영역에서는 속성을 정의할 태그가 없기 때문이다.
javascript영역에서 Thymeleaf를 사용하기 위해서는 th:inline="javascript"를 <script>에 추가하고 inline 방식으로 표현식을 작성한다. 이때 만약 디자인 프로토타입을 추가하고 싶다면 블록주석으로 inline 표현식을 감싸고 프로토타입 내용을 추가할 수도 있다.
<script th:inline="javascript">
let username = [[${user.name}]];
let title = /*[[#{home.title}]]*/ "페이지 제목"
console.log(username, title)
</script>
css 작성
css 영역에서 inline 스타일로 작성하는 것 역시 javascript에서의 방식과 매우 유사하다.
<style th:inline="css">
.[[${classname}]] {
text-align: [[${align}]];
}
</style>