[타임리프/Thymeleaf] 조건문 사용하기, 조건부 랜더링

너무나도 당연한 이야기지만 타임리프에서도 조건문을 지원하고 있다. 하긴 프로그래밍의 기본은 조건문인데 이걸 지원하지 않으면 라이브러리로서의 기능을 상실했다고 보는 게 맞지 않을까... 조건문으로는 if 와 switch 구문을 지원하고 있다.

 

자바스크립트 또는 JSP 에서 사용하는 JSTL 과는 약간 다른 방식으로 사용해야 하니 주의하도록 하자. 물론 그렇게 어렵지는 않다.

 

조건문 - th:if, th:unless

먼저 주의해야 할 점은 타임리프에서 사용하는 if 조건은 다른 프로그래밍 언어와 마찬가지로 if 구문을 사용하지만 else 구문은 지원하지 않는다. 그렇다고 else 기능이 아예 없는 건 아니고 unless 를 사용하면 되는데 주의할 점은 if 조건과 unless 의 조건이 동일해야 한다는 점이다.

 

또, 그냥 unless 만 사용하면 제대로 작동하지 않는다. 반드시 조건을 넣어야 하는데 이 부분이 처음에는 좀 헷갈릴 수 있는데 쓰다보면 익숙해지니 크게 걱정할 필요는 없다. 나는 이걸 몰라서 처음 타임리프를 사용할 때 도대체 왜 if 가 안 되지? 하고 한참 고생했던 기억이 있다.

 

TestController.java

model.addAttribute("booleanTest", true);

test.html

<span th:if="${booleanTest}">참입니다.</span>
<span th:unless="${booleanTest}">거짓입니다.</span>

Result

<span>참입니다.</span>

 

 

조건문 - th:switch

다른 언어에서 사용하는 switch 문과 큰 차이점은 없다. th:switch 는 th:case 와 같이 사용하는데 th:switch 에 조건을 넣고 th:case 에 해당 case 를 입력하면 된다. default 구문은 따로 없고 case 에 * 을 사용한다.

 

th:switch 를 사용할 때 주의할 점은 반드시 부모 엘리먼트가 있어야 한다는 점이다. 스코프가 정해져 있기 때문인데 부모 엘리먼트가 없는 경우에는 th:block 을 사용할 수 있다. 이건 어떤 기능을 하는 지 따로 적을 필요는 없을 것 같고 예제에 적어놨으니 한 번 보면 이해가 될 거라고 생각한다.

 

TestController.java

model.addAttribute("age", 20);

test.html

<!-- 부모 엘리먼트가 있는 경우 -->
<div th:switch="${age}">
  <span th:case="'10'">저는 10살입니다.</span>
  <span th:case="'20'">저는 20살입니다.</span>
  <span th:case="'30'">저는 30살입니다.</span>
  <span th:case="*">저는 기타입니다.</span>
</div>

<!-- 부모 엘리먼트가 없는 경우 -->
<th:block th:switch="${age}">
  <b th:case="'10'">저는 10살입니다.</b>
  <b th:case="'20'">저는 20살입니다.</b>
  <b th:case="'30'">저는 30살입니다.</b>
  <b th:case="*">저는 기타입니다.</b>
</th:block>

Result

<!-- 부모 엘리먼트가 있는 경우 -->
<div><span>저는 20살입니다.</span></div>

<!-- 부모 엘리먼트가 없는 경우 -->
<b>저는 20살입니다.</b>