티스토리

😜

검색하기

[스프링 MVC] - 16. Thymeleaf 타임리프 사용법 및 문법

Spring/Spring MVC

[스프링 MVC] - 16. Thymeleaf 타임리프 사용법 및 문법

hello_u 2023. 2. 18. 12:05

정적인 html 을 동적 html 로 바꿔보자

타임리프는 순수 HTML 파일을 웹 브라우저에서 열어도 내용을 확인할 수 있고,

서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있다.

순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 네츄럴 템플릿

타임리프 간단히 알아보기

타임리프 사용 선언

<html xmlns:th="http://www.thymeleaf.org">

속성 변경 - th:href

<link th:href="@{/css/bootstrap.min.css}"
        href="../css/bootstrap.min.css" rel="stylesheet">

뷰 템플릿을 거치면 th:href 의 값이 href 로 대체되면서 동적으로 변경할 수 있다.

대부분의 HTML 속성을 th:xxx 로 변경할 수 있다.

상품 목록 페이지

상품 등록 버튼 html

<button class="btn btn-primary float-end" 
        onclick="location.href='addForm.html'" type="button">상품 등록</button>

버튼 클릭시 정적 html -> addForm.html

속성 변경 - th:onclick

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

리터럴 대체 - |...|

그냥 사용하면 문자와 표현식을 각각 따로 더해서 사용해야 하므로 다음과 같이 복잡해진다

th:onclick="'location.href=' + '\'' + @{/basic/items/add} + '\''"

리터럴 대체 문법을 사용하면, 더하기 없이 편리하게 사용할 수 있다.

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

상품 등록 폼으로 이동

basic/items/add

반복 출력 - th:each

<tr th:each="item : ${items}">

모델에 있는 items 를 꺼내서 item 에 넣어줌

item 변수에 하나씩 포함되고, 반복문 안에서 item 변수를 사용할 수 있다.

변수 표현식 - ${...}

<td th:text="${item.price}">10000</td>

모델에 포함된 값이나, 타임리프 변수로 선언한 값을 조회할 수 있다.

프로퍼티 접근법을 사용한다. ( item.getPrice() )

내용 변경 - th:text

<td th:text="${item.price}">10000</td>

내용의 값을 th:text 의 값으로 변경한다.

여기서는 10000을 ${item.price} 의 값으로 변경한다.

URL 링크 표현식2 - @{...}

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

URL 링크 표현식을 사용하면 경로를 템플릿처럼 편리하게 사용할 수 있다.

경로 변수( {itemId} ) 뿐만 아니라 쿼리 파라미터도 생성한다.

예)

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

생성 링크: http://localhost:8080/basic/items/1?query=test

th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|"

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

링크표현식을 안에도 리터럴 표기를 추가해주어야 합니다.

즉, th:onclick, location.href 각각에 리터럴 표기가 필요합니다.

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

스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 - 인프런 | 강의

웹 애플리케이션을 개발할 때 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. 스프링 MVC의 핵심 원리와 구조를 이해하고, 더 깊이있는 백엔드 개발자로 성장할 수 있습니다., -

www.inflearn.com

저작자표시