Thymeleaf

타임리프(Thymeleaf) 문법 1

심나라 2023. 9. 17. 16:12
728x90

자주 사용되는 타임리프 문법에 대해서 정리했습니다.

 

if (분기문 속성)

<li th:if="${question != null}"></li>

 

if-else (분기문 속성)

여기서 주의할 점은 if의 조건과 unless의 조건을 동일하게 적어주어야 정상적으로 동작 합니다.

<div th:if="${info.useYn == 'Y'}">사용</div>
<div th:unless="${info.useYn == 'Y'}">사용안함</div>

 

each (반복문 속성)

<tr th:each="notice : ${noticeList}">
    <td></td>
</tr>

each 반복문은 아래와 같이 사용할 수도 있습니다.

<tr th:each="notice, loop : ${noticeList}">
    <td></td>
</tr>

추가한 loop 객체를 이용하여 루프 내에서 다음과 같은 속성을 사용할 수 있습니다. 

  • loop.index - 반복 순서, 0부터 1씩 증가
  • loop.count - 반복 순서, 1부터 1씩 증가
  • loop.size - 반복 객체의 요소 갯수 (예 : noticeList의 요소 갯수)
  • loop.first - 루프의 첫번째 순서인 경우 true
  • loop.last - 루프의 마지막 순서인 경우 true
  • loop.odd - 루프의 홀수번째 순서인 경우 true
  • loop.even - 루프의 짝수번째 순서인 경우 true
  • loop.current - 현재 대입된 객체 (예 : 위의 경우 notice와 동일)

 

text (텍스트 속성)

해당 엘리먼트의 텍스트로 "값"을 출력합니다. 

<tr>
    <td th:text="${notice.subject}"></td>
</tr>

텍스트는 "th:text" 속성 대신에 아래처럼 대괄호를 사용하여 값을 직접 출력할 수 있습니다.

<tr th:each="notice : ${noticeList}">
    <td>[[${notice.subject}]]</td>
</tr>

 

value

input, textarea 등의 태그에 value를 출력합니다.

<input type="hidden" th:vaue="${data.idx}"/>

 

href (링크 속성)

타임리프에서 링크의 주소는 "th:href" 속성을 사용합니다. 타임리프에서 th:href 처럼 URL 주소를 나타낼때는 @{ 문자와 } 문자 사이에 입력해야 합니다. 

그리고, 아래의 링크처럼 /notice/detail/ 과 ${noticeId} 값이 조합되어 /notice/detail/${noticeId} 가 만들어 졌다면 좌우에 | 문자를 사용하지 않으면 오류가 발생합니다. 

/notice/detail/과 같은 문자열과 ${noticeId}와 같은 자바 객체의 값을 더할 때는 다음처럼 |과 | 기호로 좌우를 감싸 주어야 합니다. 
타임리프는 문자열을 연결할 때 | 문자를 사용합니다. 

<a th:href="@{|/notice/detail/${noticeId}|}" th:text="${subject}"></a>

 

action (form의 action)

form 태그의 action은 타임리프에서 "th:action" 속성으로 생성합니다. 

<form th:action="@{|/notice/create/${userId}|}" method="post">
    <input type="text" name="userId" >
    <input type="submit" value="수정">
</form>

 

#lists.size(이터러블객체)

#lists.size(이터러블객체)는 타임리프가 제공하는 유틸리티로 객체의 길이를 반환합니다.

<h5 th:text="|${#lists.size(question.answerList)} 개의 답변|"></h5>

 

#temporals.format(날짜객체, 날짜포맷)

날짜객체를 날짜포맷에 맞게 변환해 줍니다.

<tr>
    <td th:text="${#temporals.format(createDt, 'yyyy-MM-dd HH:mm:ss'}"></td>
</tr>

 

 

참고사이트 : https://wikidocs.net/161186

 

 

728x90