[Thymleaf - 1부] 타임리프의 주요 문법

간략하게 영한님 MVC 2편에 대해 학습한 내용을 적을 예정이다. 오늘은 중요 포인트 중 리터럴 값 사용과 연산 속성 반복 조건부 주석에 대해 학습해보았다.

 

차근차근 하나 씩 살펴보자. 

 

1. 리터럴 

 

리터럴은 자바에서도 배웠을 것이다. 코드상에 고정된 값으로 상수랑은 좀 다른 의미로 존재한다.  20, 2, "Hello" 등이 리터럴이라고 할 수 있다. 

 

사실 이러한 내용이 중요한 것은 아니다. 핵심은 리터럴은 항상 ''로 감싸야 하는데 이 때 타임리프는 번거로움을 덜어주고자 다음과 같은 상황엔 생략이 가능하다.

 

가능한 상황 : A-Z, a-z, 0-9, [],   . ,  - ,  _ 

<span th:text="hello">

이러한 경우에는 정상적으로 타임리프가 동작하지만 

<span th:text="hello world!"></span>

위와 같은 코드는 중간에 Blank가 존재하기 때문에 동작하지 않고 오류가난다. 만약 이를 잘 모르고 타임리프를 사용한다면 오류를 찾는데까지 오래 걸릴 수 있다. 그렇기 때문에 매우 중요한 타임리프의 성질이라 할 수 있다.

 

<span th:text="'hello world!'"></span>

위 코드처럼 수정해야 동작이 잘 된다는 것을 꼭 기억하자.

 

2. 연산

크게 다르지 않은 연산이들이기 때문에 어려울 건 없다.

    <li>산술 연산
        <ul>
            <li>10 + 2 = <span th:text="10 + 2"></span></li>
            <li>10 % 2 == 0 = <span th:text="10 % 2 == 0"></span></li>
        </ul>
    </li>
    <li>비교 연산
        <ul>
            <li>1 > 10 = <span th:text="1 &gt; 10"></span></li>
            <li>1 gt 10 = <span th:text="1 gt 10"></span></li>
            <li>1 >= 10 = <span th:text="1 >= 10"></span></li>
            <li>1 ge 10 = <span th:text="1 ge 10"></span></li>
            <li>1 == 10 = <span th:text="1 == 10"></span></li>
            <li>1 != 10 = <span th:text="1 != 10"></span></li>
        </ul>
    </li>
    <li>조건식
        <ul>
            <li>(10 % 2 == 0)? '짝수':'홀수' = <span th:text="(10 % 2 == 0)? '짝수':'홀수'"></span></li>
        </ul>
    </li>
</ul>

연산들을 모아놓은 HTML 페이지 소스이다. 산술 연산은 보다싶이 매우 간단하게 나타낼 수 있다. 주목해야 할 점은 그 밑에 비교 연산이다. 

 

다음 표를 보면 이해가 쉬울 것이다. 

기호	원문
&gt(HTML 문법)	>
gt	>
ge	>=
lt	<
le	<=

 

또한 자바 삼항 연산자 처럼 조건식을 사용할 수 있으니 기억하도록 하자.

<li>Elvis 연산자
    <ul>
        <li>${data}?: '데이터가 없습니다.' = <span th:text="${data}?: '데이터가 없습니다.'"></span></li>
        <li>${nullData}?: '데이터가 없습니다.' = <span th:text="${nullData}?:'데이터가 없습니다.'"></span></li>
    </ul>
</li>
<li>No-Operation
    <ul>
        <li>${data}?: _ = <span th:text="${data}?: _">데이터가 없습니다.</span>
        </li>
        <li>${nullData}?: _ = <span th:text="${nullData}?: _">데이터가없습니다.</span></li>
    </ul>
</li>

Elvis 연산자와 No-Operation이 존재하는데 코드를 보면 동작이 어떻게 되는지 쉽게 알 수 있을 것이다.

 

먼저, Elvis 연산자는 조건을 걸고 그 데이터가 존재한다면  데이터를 출력하고 아니라면 옆에 데이터가 없습니다.  를 출력하게 된다. 

 

No-Operation 연산자는 마치 타임리프가 실행되지 않는 것 처럼 동작한다. 이것을 잘 활용하여 HTML을 그대로 활용할 수 있다.

 

3. 속성

타임리프는 HTML 태그에 th:* 속성을 지정하는 방식으로 동작한다. 기존 속성이 없다면 새로 만든다.

<input type="text" name="mock" th:name="userA"/>

이 코드는 서버를 띄우고 타임리프가 동작한다면 "mock"이 아닌 userA를 화면에 보여지게된다. 타임 리프가 랜더링 되면 다음과 같은 소스로 변경된다.

<input type="text" name="userA"/>

 

그렇다면 속성 추가는 어떻게 할까?

 

th:attrappend : 속성 값의 뒤에 값을 추가한다. 

th:attrprepend: 속성 값의 앞에 값을 추가한다.

th:classappend: class 속성에 자연스럽게 추가한다.

 

checked 처리 같은 경우에는 HTML에서는 다음과 같은 문제가 발생한다.

<input type="checkbox" name="active" checked="false" />

이 경우에도 checked라는 속성이 읽히기 때문에 checked 처리가 된다. 

 

타임 리프는 이러한 걸 깔끔하게 해결해준다. 

- checked o <input type="checkbox" name="active" th:checked="true"/><br/>

이런 식으로 랜더링을 하게 된다면 오로지 true, false만 인식하여 동작하기 때문에 true, false로 처리하는 개발자 특성과 안성 맞춤이다. checked속성을 아예 제거하는 것이다. 

 

 반복

th:each를 이용하여 반복하여 값을 보여준다. 이건 코드로 간단하게 보여주고 마치겠다.

<table border="1">
    <tr>
        <th>username</th>
        <th>age</th>
    </tr>
    <tr th:each="user : ${users}">
        <td th:text="${user.username}">username</td>
        <td th:text="${user.age}">0</td>
    </tr>
</table>

 

이것보단 Status라는 게 존재하는데 간단하다. 반복 상태를 유지해주는 문법인데

<tr th:each="user, userStat : ${users}"> 문법을 사용하여 반복의 상태를 확인할 수 있다. 또한 Stat을 생략하여 표현도 가능하다. 

 

다음과 같은 속성이 존재하는데 

 

• index : 0 부터 시작하는 값
• count : 1부터 시작하는 값
• size : 전체 사이즈
• even, odd : 홀수, 짝수 여부
• first, last : 처음, 마지막 여부
• current : 현재 객체

이러한 속성들이 존재하니 기억하고 필요할 때 쓸 수 있도록 하자 !!

 

5. 조건

타임 리프의 조건식은 if, unless가 존재한다. 이 부분은 간단하게 글로 설명하자면 타임 리프는 해당 조건에 맞지 않는다면 태그 자체를 랜더링하지 않는다. 조건이 false라면 <span>부분 자체가 사라져 버린다.

 

외에 switch가 존재하는데 이는  *  은 만족하는 조건이 없을 때 디폴트로 사용된다. 

 

6. 주석 

여러 종류가 있는데 종류마다 타임리프가 처리하는 방식이 다르다. 

 

1. 표준 HTML 주석

자바스크립트의 표준 HTML 주석은 타임리프가 랜더링 하지 않고, 그대로 남겨둔다.

 

2. 타임리프 파서 주석

타임리프 파서 주석은 타임리프의 진짜 주석이다. 랜더링에서 주석 부분을 제거한다.

 

3. 타임리프 프로토타입 주석

타임리프 프로토타입은 약간 특이한데, HTML 주석에 약간의 구문을 더한다. HTML 파일로 동작하면 주석이기 때문에 동작하지 않지만 타임리프 랜더링을 거칠 경우엔 정상적으로 랜더링 된다. 타임리프에서만 보여줘야 할 문구라면 이러한 식으로 처리할 수 있다. 

 

마지막으로 코드를 보고 마치겠다. 

<h1>예시</h1>
<span th:text="${data}">html data</span>
<h1>1. 표준 HTML 주석</h1>
<!--
<span th:text="${data}">html data</span>
-->
<h1>2. 타임리프 파서 주석</h1>
<!--/* [[${data}]] */-->
<!--/*-->
<span th:text="${data}">html data</span>
<!--*/-->
<h1>3. 타임리프 프로토타입 주석</h1>
<!--/*/
<span th:text="${data}">html data</span>
/*/-->

 

Reference.

김영한 - 스프링 MVC 2편 : Thymleaf