[타임리프/Thymeleaf] 기본 표현식

투입한 프로젝트에서 타임리프를 쓰게 됐다. 자바, JSP 만 할 줄 알면 된다더니 하여튼 프로젝트 투입하는 곳마다 사용 기술에 대해 정확한 정보를 주는 적이 없다. 타임리프를 쓰면 JSP 는 할 줄 알 필요가 없잖아...

 

하긴 뭐 JSTL 과 사용 방법에 있어 크게 차이는 없으니 JSP 를 할 줄 아는 사람이라면 타임리프는 쉽게 적응할 수 있어서 아예 안 해본 것보다는 나을 수도 있겠다. 그나마 나는 ㅇㅁㄹㅍㅅㅍ 에서 근무할 때 타임리프를 어느 정도 사용해봤고 그 이후로도 간간히 혼자 프로젝트를 진행하면서 조금씩 사용해왔기 때문에 큰 부담은 없는 게 다행이라면 다행이다.

 

하지만 개발 공부가 늘 그렇듯이 잠깐 사용하지 않았다고 그새 다 잊어버린 바람에 다시 복습을 하면서 복습한 내용들을 위주로 블로그에 남겨본다. 나를 위한 정리이고 내가 봤을 때 다시 떠오를 정도로만 내용을 적을 예정이기 때문에 타임리프로 검색해서 들어오는 분들에게는 크게 도움이 되지 않을 수도 있다.

 

변수 표현식 : ${...}

정말 단순히 서버(컨트롤러)에서 넘어온 변수를 화면에 출력(또는 할당) 할 때 사용한다. 보통 텍스트를 출력할 때 th:text 를 많이 사용하는데 참고로 적어두자면 th:text 와 [[...]] 는 기본적으로 이스케이프를 지원한다. 

 

태그를 적용한 상태로 보여주기 위해 이스케이프를 하지 않을 경우에는 th:utext 또는 [(...)] 를 사용하면 된다. 각자 필요한 상황에 맞춰 적절한 구문을 사용하자.

 

TestController.java

model.addAttribute("homepage",  "<b>haguangho.com</b>");

test.html

<!-- ESCAPE -->
<span th:text="${homepage}">Default Homepage</span>
<span>[[${homepage}]]</span>

<!-- UN-ESCAPE -->
<span th:utext="${homepage}">Default Homepage</span>
<span>[(${homepage})]</span>

Result

<!-- ESCAPE -->
<span><b>haguangho.com</b></span>
<span><b>haguangho.com</b></span>

<!-- UN-ESCAPE -->
<span>haguangho.com</span>
<span>haguangho.com</span>

 

 

선택 표현식 : *{...}

선택 표현식은 무조건 th:object 와 같이 사용한다고 보면 된다. th:object 에 들어있는 객체에서 필요한 값을 키로 꺼내올 수 있다. 물론 스코프가 정해져 있기 때문에 여기서 사용했다고 해서 저~~~~기서도 사용할 수 있는 건 아니다.

 

TestController.java

Member > name, age, gender
Member member = new Member("haguangho", 38, "M");
model.addAttribute("member", member);

test.html

<div th:object="${member}">
    <span th:text="*{name}">이름</span>
    <span th:text="*{gender}">성별</span>
    <span th:text="*{age}">나이</span>
</div>

Result

<div>
    <span>haguangho</span>
    <span>M</span>
    <span>38</span>
</div>

 

 

메세지 표현식 : #{...}

정의된 메세지를 꺼내올 때 사용한다. 물론 아무데나 작성해놨다고 해서 무조건 꺼내올 수 있는 건 아니고 이 메세지를 꺼내오기 위해서는 프로퍼티를 타임리프 설정파일에 추가해줘야 한다. 그 부분은 여기서 다루지 않겠다.

 

message_ko.properties

text.null = "메세지가 없습니다."
text.confirm = "확인 되었습니다."

test.html

<span th:text="#{text.null}">메세지</span>

Result

<span>메세지가 없습니다.</span>

 

 

URL 표현식 : @{...}

URL 링크를 다양한 방식으로 표현할 수 있다. 정말 단순히 그냥 링크를 보여주기만 할건데 URL 표현식을 사용할 필요는 없다.

 

JS, CSS, IMG 파일들을 th:src 를 이용해 설정할 경우에는 기본적으로 템플릿 폴더를 바라보게 설정되어 있었던가 어쨌던가... 늙으니까 기억력이 영...

 

test.html

<a th:href="@{/haguangho.com}">링크</a>
<a th:href="@{/haguangho.com(id='haguangho')}">링크</a>
<a th:href="@{/haguangho.com/{id}(id='haguangho')}">링크</a>
<a th:href="@{/haguangho.com/{id}(id='haguangho', domain='dotcom')}">링크</a>
<a th:href="@{/haguangho.com/{id}(id='haguangho', page=${page})}">링크</a>

Result

<a href="/haguangho.com">링크</a>
<a href="/haguangho.com?id=haguangho">링크</a>
<a href="/haguangho.com/haguangho">링크</a>
<a href="/haguangho.com/haguangho?domain=dotcom">링크</a>
<a href="/haguangho.com/haguangho?page=1">링크</a>

 

이 외에도 조각 표현식이 있는데 이건 다음 기회에 따로 작성하는 걸로. 이 정도 표현식만 알아도 서버에서 끌어온 데이터들을 단순히 화면에 뿌려주는 데는 크게 무리는 없다고 본다.