타임리프 사용법 정리

https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2/dashboard

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의

 

타임리프 기초 사용법

text 이스케이프

컨트롤러로부터 넘어온 데이터의 값에 < 와 같은 특수문자가 포함되어있을 수 있으므로 타임리프에서는 자동으로 < > 같은 문자를 다른 문자로 치환해준다. 이를 escape라고 한다.

text는 이스케이프 처리를 해주지만 utext는 이스케이프 처리를 해주지 않는다는 특징이 있다.

 

프로퍼티 접근

컨트롤러로부터 user 라는 객체가 넘어왔고 user의 name 프로퍼티에 접근하려면 다음과 같은 3가지 방법이 있다.

<li>${user.name} =    <span th:text="${user.name}"></span></li>
<li>${user['name']} = <span th:text="${user['name']}"></span></li>
<li>${user.getName()} = <span th:text="${user.getName()}"></span></li>

 

타임리프 url

<li><a th:href="@{/hello}"></a></li>
<li><a th:href="@{/hello(p1=${param1}, p2=${param2})}"></a></li>
<li><a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}"></a></li>

타임리프에서는 @{ ~~url  }   이렇게 url 식을 표현한다. 그리고 뒤에 괄호로 파라미터 바인딩을 시키는데 만약 바인딩 안되고 남은게 있다면 쿼리 스트링으로 뒤에 붙는다.

 

리터럴

타임리프의 문자 리터럴은 ' 로 감싸야 한다. ( 쌍따옴표가 아님에 주의)
th:text=" ' hello ' "    (보기 편하게 띄어쓰기를 다 넣었음)
근데 만약 위의 hello와 같이 띄어쓰기 없이 단어 하나만 있다면 ' 를 생략해도 되긴 하다

<span th:text="'hello' + ${data}"></span>
<span th:text="|hello ${data}|"></span>

밑의 || 는 리터럴 대체 문법이다. 자바스크립트의 백틱과 비슷하다.

 

연산

  <ul>
    <li><span th:text="10 + 2"></span></li>
    <li><span th:text="10 % 2 == 1"></span></li>
  </ul>

  <ul> 비교
    <li><span th:text="10 gt 2"></span></li>
    <li><span th:utext="10 > 2"></span></li>
  </ul>

    <ul>
        <li><span th:text="${nullData}?: 'No data'"></span></li>
        <li><span th:text="${nullData}?: _">기본 내용</span></li>
    </ul>

아래의 ${data}?: 'data' 는 만약 data에 값이 있으면 그 값을 출력하고 없으면 : 뒤의 값을 출력한다.
_ 는 No operation으로 타임리프 템플릿 적용없이 렌더링 된다. 그래서 span 태그 사이에 있는 값인 "기본 내용" 이 출력된다.

 

속성값 설정

타임리프에서는 th: 로 속성을 지정해서 사용하는데 기존의 속성을 재정의 하거나 새롭게 추가하는 것이 가능하다.

    <input type="text" th:type="password">
    <input type="text" class="hello" th:attrappend="class=' hi'">
    <input type="text" class="hello" th:classappend="hi">

 

타임리프에서 속성값을 지정하면 기존의 속성값을 덮어쓰게 된다.

첫번째 input 태그의 type 값은 text가 아닌 password로 덮어씌워졌다.
만약 이미 있는 속성값에 추가를 하고 싶으면 attrappend 나 attrprepend를 사용하면 된다. 띄어쓰기 주의
클래스를 추가할 때에는 classappend를 사용해서 편하게 추가할 수 있다.

 

반복문

<tr th:each="item : ${리스트와 같은 자료형}">
    <td th:text="${item.a}"></td>
    <td th:text="${item.b}"></td>
</tr>

th:each를 통해 반복문을 사용할 수 있다. 컨트롤러에서 model 에 담아준 리스트 같은 이터러블한 자료형을 item에 담아서 출력하고 있는 모습이다.

두번째 파라미터를 추가해서 현재 반복상태의 인덱스값, count값, 첫번째인지 마지막인지 등을 받아올 수 있다.

<tr th:each="item, itemStat : ${리스트와 같은 자료형}">
    <td th:text="${item.a}"></td>
    <td th:text="${item.b}"></td>
    //itemStat.count or itemStat.first 등등
</tr>

 

타임리프 반복문에는 th:block 이라는 특수한 태그를 쓰기도 함.

만약 tr 태그가 아니고 그냥 div 태그로 반복문을 돌리는데 div 두개를 쓰고 싶은경우에 사용한다.

<th:block th:each="user : ${users}">
    <div>
        user에 접근
    </div>
    <div>
       user에 접근
    </div>
</th:block>

만약 th:block을 사용하지 않으면 span태그나 div등 다른 상위 태그를 쓸 수 있겠지만 계층 구조가 복잡해진다.
th:block은 자식 엘리먼트들만 출력시키고 자신은 사라진다.

 

조건문

1. if

<div th:if="${number lt 5}"> 5보다 작음 </div>
<div th:if="${number gt 5}"> 5보다 큼 </div>

if문의 조건에 맞는 경우 해당 태그를 렌더링 한다.

2. unless

<div th:unless="${number lt 5}"> 5보다 작지 않음 </div>
<div th:unless="${number gt 5}"> 5보다 크지 않음 </div>

unless 내의 조건이 거짓일 경우 렌더링 된다.

 

3. switch

<div th:switch="${number}">
    <span th:case="1">111</span>
    <span th:case="2">222</span>
    <span th:case="3">333</span>
    <span th:case="*">***</span>
</div>

상위 태그에 switch가 선언되었는지 주의한다.

타임리프의 switch case문이다.

 

마무리

타임리프.. 역시 딱히 어려운건 없는 듯 하다.