타임리프를 사용하기 위해서는 html 코드에 아래 코드를 적용시켜 줘야 한다.
<html xmlns:th="http://www.thymeleaf.org">위 코드를 적용하지 않아도 된다는 말도 있다고 하는데 그냥 적용시켜 사용하는 것을 추천한다고 한다.
href="../css/bootstrap.min.css"
이런 html 코드를 타임리프를 통해 아래와 같이 변경해 줄 수 있다.
th:href="@{/css/bootstrap.min.css}"
이렇게 되면 페이지에서 소스 보기를 했을 때 ..경로가 없이 동적인 페이지를 완성시켜 나갈 수 있게 된다.
타임리프에서 URL 링크를 사용할 때는 @{..}를 사용한다고 한다. 이 URL 링크 표현식을 사용하면 서블릿 컨텍스트를 자동으로 포함한다.
타임리프의 핵심은 th: 가 붙은 부분은 서버사이드에서 랜더링 되고, 기존 것을 대체한다는 것이다. th: 가 없다면 기존의 html의 속성이 그대로 사용된다.
html을 파일로 직접 열었을 때 th:가 있어도 웹 브라우저는 th: 속성을 알지 못 하므로 무시하게 된다. 따라서 html을 파일 보기를 유지하면서도 템플릿 기능을 사용할 수 있는 것이다.
onclick="location.href='addForm.html'"
이번에는 이런 onclick을 타임리프로 변경해 주었다.
th:onclick="|location.href='@{/basic/items/add}'|"
이렇게 변경해 주었는데 여기서 사용된 | | 이것이 리터럴 대체이다. 리터럴 대체를 사용하면 문자와 표현식을 합쳐서 사용이 가능해진다. 체감하기 위한 코드도 준비했다.
th:href="@{/basic/items/{itemId}(itemId=${item.id})}"
th:href="@{|/basic/items/${item.id}|}"
위와 아래 딱 봐도 리터럴 대체가 사용된 아래 코드가 확실히 깔끔하게 사용되는 것 같다.
<tr th:each="item : ${items}">
<td><a href="item.html" th:href="@{/basic/items/{itemId}(itemId=${item.id})}" th:text="${item.id}">회원id</a></td>
<td><a href="item.html" th:href="@{|/basic/items/${item.id}|}" th:text="${item.itemName}">상품명</a></td>
<td th:text="${item.price}">10000</td>
<td th:text="${item.quantity}">10</td>
</tr>
이게 위에 부분 코드의 전체 코드인데 여기에서는 반복 출력인 th:each가 사용되었다. 이렇게 사용하면 모델에 포함된 items 컬렉션 데이터가 item 변수에 하나씩 포함되고 반복문 안에서 item 변수를 사용할 수 있게 된다. 즉, 컬렉션의 수 만큼 <tr>이 하위 태그를 포함해 생성이 되게 된다.
th:href="@{|/basic/items/${item.id}|}"
다시 이 코드를 보면 변수 표현식인 ${}가 사용이 되었다. 모델에 포함된 값이나 타임 리프 변수로 선언한 값을 조회할 수 있고 프로퍼티 접근법을 사용한다.
<td th:text="${item.price}">10000</td>
이 코드에는 내용 변경 부분이 들어갔다. 내용의 값을 th:text의 값으로 변경하고 여기서는 10000을 ${item.price} 값으로 변경한다.
'Framework & Library > Spring Boot' 카테고리의 다른 글
| [Spring Boot] : 상품 등록 처리 @ModelAttribute 사용하기 (0) | 2022.02.03 |
|---|---|
| [Spring Boot] : 상품 상세 페이지 타임리프 적용 및 목록으로 가기 구현 (0) | 2022.02.03 |
| [Spring Boot] : 요구사항에 맞춰 상품 도메인을 개발하고 테스트 코드를 작성하기 (0) | 2022.02.02 |
| [Spring Boot] : 프로젝트 생성 및 요구사항 분석 (0) | 2022.02.01 |
| [Spring Boot] : 요청 매핑 핸들러 어뎁터 구조 (0) | 2022.01.28 |
댓글