타임리프의 핵심
th:x 가 붙은 부분은 서버사이드에서 렌더링 되고, 기존 것을 치환함.
th:x 가 없으면 기존 html의 속성 x가 그대로 사용됨
<html xmlns:th="http://www.thymeleaf.org">
앞에 써줘야 사용가능
URL 링크 표현식(@{...})
@{/css/bootstrap.min.css}
리터럴 대체 문법( | | )
th:onclick="|location.href='@{/basic/items/add}'|"
| | 안에다 넣으면 편리하게 한꺼번에 사용 가능
원래는 "'location.href=' + '\'' +@{/basic/items/add} + '\''" 이렇게 +와 이스케이프로 해야함
변수 표현식(${...})
<td th:text="${item.price}">10000</td>
모델에 넘어온 값이나 타임리프 변수로 선언한 값 조회 가능(프로퍼티 접근법)
내용 변경(th:text)
<td th:text="${item.price}">10000</td>
10000을 th:text의 값으로 치환
<input type="text" id="itemId" name="itemId" class="form-control" value="1" th:value="${item.id}" readonly>
1을 th:value의 값으로 치환
치환하고 싶은 속성을 지정해야함
반복 출력(th:each)
th:each="item : ${items}"
반복문으로 리스트(items)를 하나씩 꺼내서 씀
여기서 items는 모델 값이고, item은 타임리프의 변수로 선언한 값이다.
경로 변수 표현식
th:href="@{/basic/items/{itemId}(itemId=${item.id})}"
타임리프 변수인 경로 변수{itemId} 를 item.id의 값으로 치환(괄호로 바로 정의할수 있음)
쿼리 파라미터도 생성 가능
e.g. th:href="@{/basic/items/{itemId}(itemId=${item.id}, query='test')}"
-> 생성 링크: http://localhost:8080/basic/items/1?query=test
URL 링크 더 간단히
th:href="@{|/basic/items/${item.id}|}"
리터럴 대체 문법으로 위의 경로 변수 표현식을 간단히 할수도 있음
JSP와 달리 타임리프는 HTML 파일을 웹 브라우저에서도 열어서 확인을 해보면 HTML형식 그대로 이기때문에
내용 식별이 쉽고 서버를 통하면 동적으로 변경된 결과도 확인 가능
순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할수 있는 특징을 네츄럴 템플릿이라고 함
조건문(th:if)
<h2 th:if="${param.status}" th:text="'저장 완료'">
조건에 맞으면 생성
'웹 프로그래밍 > 프론트 엔드' 카테고리의 다른 글
| 타임리프(스프링 통합과 폼) (0) | 2023.04.13 |
|---|---|
| Thymeleaf(타임리프) 기본 (0) | 2023.04.11 |
| JavaScript 기초 (0) | 2023.04.02 |
| CSS 기초 (0) | 2023.04.02 |
| HTML 기초 (0) | 2023.04.01 |
