54. 타임리프 템플릿

스프링/3. 스프링 MVC

54. 타임리프 템플릿

sdafdq 2023. 8. 15. 14:26

타임리프는 기존 것을 대체하는 식이다. 없으면 html 그대로 출력된다. 그래서 그냥 html문서로 열어도 되긴 된다. 단, 타임리프는 자바가 실행시켜주는 것 이므로 타임리프로 대체는 할 수 없다.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <link  th:href="@{/css/bootstrap.min.css}"
          href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="max-width: 600px">
  <div class="py-5 text-center">
    <h2>상품 목록</h2>
  </div>
  <div class="row">
    <div class="col">
      <button class="btn btn-primary float-end"
              onclick="location.href='addForm.html'"
              th:onclick="|location.href='@{/basic/items/add}'|"
              type="button">상품
        등록</button>
    </div>
  </div>
  <hr class="my-4">
  <div>
    <table class="table">
      <thead>
      <tr>
        <th>ID</th>
        <th>상품명</th>
        <th>가격</th>
        <th>수량</th>
      </tr>
      </thead>
      <tbody>
      <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}">가격</td>
        <td th:text="${item.quantity}">수량</td>
      </tr>
      </tbody>
    </table>
  </div>
</div> <!-- /container -->
</body>
</html>

만약 th:text="${item.id}">상품ID</a></td>

여기서 item.id에 대한 정보가 없으면 그냥 상품ID라고 나오고, 있으면 저 item.id가 대체되어 출력된다.

참고로 타임리프는 자바측에서 실행시켜주는거다. view.render()할 때 실행시켜주는 듯.

time.id는 프로퍼티 접근법이다. 저거 쓰면 time.getId()를 해주는 거다.

@{~~~} 이것이 url 링크 표현식이다.

이것도 url상의 /css/bootstrap.min.css에 있는 css 정보를 가져오는..

url쓸 때 이거 쓰면 된다.

th:href="@{/basic/items/{itemId}(itemId=${item.id})}"

이거는 경로변수,

{변수이름}(변수이름=${값})

이라고 해야 할 지.. 값이라기 보다는 그 값이 변수이름이 되니.

item.id가 {itemId} 대신에 들어간다.

<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}">가격</td>
<td th:text="${item.quantity}">수량</td>
</tr>

th:each는 반복문이다.

${items}에 있는(자바로부터 items라는 키로 모델에 담겨서 넘어온) 개개들을 item이라는 이름으로 사용한다는 거다.

그냥 저렇게 되면 반복문 태그로 바뀐다고 보면 된다. 그러므로 만약 ${items}에 있는게 0개라면 저게 하나도 태그에 포함되지 않는다.

th:href="@{|/basic/items/${item.id}|}"

| | 이거는 자바스크립트의 ` `나 c#의 $" "였었나, 그 문자열 문맥 상에 변수 쉽게 쓰는 그거다.

|안녕, ${username}아!|

이런 식이다.

문법상 저거 누르면

http://localhost:8080/basic/items/1

만약 아이템 id가 1이라면 저렇게 이동한다는 뜻이다.

th:onclick="|location.href='@{basic/items}'|"

이것도 안써도 될것 같지만 저 작은따옴표때문에 써야 한다. 원래 저 작은 따옴표 저기 안에서 쓸려면 \' 이런 식으로 써야 함.

변수는 ${변수이름} 이렇게 표현된다.

여기는 model에서 넘어온 키의 이름으로 쓴다.

아니면 <tr th:each="item : ${items}"> 여기서 ${item} 이렇게 item을 쓸 때 라던지..

프로퍼티 접근이 가능하고, 당연히 ${item.getId()}도 된다. 도 된다라기 보다는 원래 저거다.

참고로, 만약

th:href="@{/basic/items/{itemId}(itemId=${item.id})}"

여기서 itemId=${iteem.id} 말고도 추가로 더 쓰면

th:href="@{/basic/items/{itemId}(itemId=${item.id}, key='value')}"

이렇게 콤마로 뭐=뭐 더 추가해서 쓰면

http://localhost:8080/basic/items/1?key=value

이렇게 쿼리로 만들어 진다.

추가로, 조건문도 가능하다.

이렇게 하면, 만약 조건이 참이면 저 태그를 사용하는 듯 하다. 아니면 사용안하고.

이건 if-else

아 그리고 추가로, param 저거는 우리가 따로 지정안해도 쓸 수 있는 쿼리파라미터이다. 쿼리파라미터가 저기로 들어간다. Map 형식으로 있었던 듯? GET쿼리파라미터 말고도 Post Form까지는 받을 듯. @RequestParam 범위일 듯.

이렇게 그냥 th:action 쓰면, 지금 url로 간다는 뜻이다. 즉, 만약 저 form의 submit을 누르면 지금 url로 post로 요청이 간다.

이렇게 하면 이제 html따로 서버사이드 따로 발전이 가능하다.

저작자표시 비영리 변경금지

'스프링 > 3. 스프링 MVC' 카테고리의 다른 글

55. 컨트롤러 구현 (0)	2023.08.15
53. 도메인 (0)	2023.08.14
52. 요구사항 (0)	2023.08.14
51. 요청 파라미터 및 메시지바디의 데이터 정리 (0)	2023.08.13
50. 스프링MVC 구조 전체정리. (0)	2023.08.13

현재글54. 타임리프 템플릿

qwef