스프링부트를 공부하는 중에 타임리프에 대해 알게 되었습니다.
전에 Spring을 사용해서 팀 프로젝트를 진행할 때는 JSP를 사용했는데요.
Springboot는 뷰 템플릿으로 Thymeleaf를 사용하는 것을 권장한다고 합니다.
그래서 이 글에서는 Thymeleaf란 무엇이고, 사용할 수 있는 몇 가지 문법에 대해 정리해보겠습니다.
Thymeleaf
타임리프는 내츄럴 템플릿(Natural Templates)이라고 부르기도 합니다.
내추럴 템플릿은 순수 HTML을 유지하면서 뷰 템플릿으로도 사용할 수 있는 것을 말합니다.
예를 들어 JSP는 서버를 거치지 않고 파일을 열 경우에 소스코드와 HTML 코드가 섞여 알아볼 수 없습니다.
하지만 Thymeleaf는 파일을 웹 브라우저에 열어 내용을 확인할 수 있고 서버를 통해 보면 동적인 결과도 얻을 수 있습니다.
또한 JSP는 .jsp로 저장이 되고 Thymeleaf는 html 파일로 저장됩니다.
HTML에서 타임리프를 사용하기 위한 선언은 아래와 같습니다.
<html xmlns:th="http://www.thymeleaf.org">해당 선언을 해줄경우 HTML 내 태그에 있는 대부분의 속성들을 th:xxx 형식으로 바꿔 사용할 수 있습니다.
html 파일을 서버를 거치지 않고 그대로 볼 때에는 기존의 html 태그의 속성이 사용되고
서버를 거쳐 동적으로 뷰 템플릿을 거치게 되면 기존 태그의 속성을 th:xxx의 값으로 치환합니다.
예를 들어 input의 value값을 Thymeleaf로 표현하면 아래와 같습니다.
<!-- 기존 HTML -->
<input type="text" value="1"/>
<!-- Thymeleaf -->
<input type="text" value="1" th:value="${otherValue}"/>이렇게 작성된 html은 html 파일을 웹브라우저로 켤 경우 input 박스의 값이 1로 보이고
서버를 거쳐 렌더링되어 웹브라우저에 보일 경우에는 otherValue에 담긴 값이 input박스의 값으로 나오게 됩니다.
간단하게 Thymeleaf에 대해 설명을 해봤습니다.
아래에는 타임리프의 간단한 문법을 정리해보겠습니다.
문법
URL 링크 표현식
<a href="/user" th:href="@{/user}"/>타임리프에서 링크표현식은 @{...}을 사용합니다.
링크 표현식은 표현식 안에 '()'를 사용해서 경로 변수와 쿼리 파라미터도 생성 가능합니다.
<!-- 경로 변수
{itemId}를 item의 id로 대체합니다.
-->
th:href="@{/basic/items/{itemId}(itemId=${item.id})}"
<!-- 쿼리 파라미터 -->
th:href="@{/basic/items/{itemId}(itemId=${item.id}, query='test')}"
<!-- 지정되지 않은 query는 쿼리 파라미터로 치환됩니다.
basic/items/1?query=test
-->
물론 간단히 아래처럼 사용할 수도 있습니다.
th:href="@{|/basic/items/${item.id}|}"
리터럴 대체
리터럴 대체는 |...|으로 사용합니다.
타임리프에서는 문자와 표현식 등이 분리되어 있기 때문에 + 연산자를 사용해야 합니다.
하지만 리터럴 대체 문법을 사용하면 연산자를 사용할 필요 없이 사용할 수 있습니다.
<!-- 리터럴 대체 사용 전 -->
<span th:text="'Welcome to our application, ' + ${user.name} + '!'">
<!-- 리터럴 대체 사용 후 -->
<span th:text="|Welcome to our application, ${user.name}!|">
변수 표현식
변수 표현식은 ${...}으로 사용합니다.
모델에 포함된 값이나 타임리프 변수로 선언한 값을 조회할 수 있습니다.
프로퍼티 접근법을 사용합니다.
${param}
// ex)
// localhost:8080/user?userId=kkkt
${param.userId} => kkkt
위 코드는 타임리프에서 쿼리 파라미터를 편리하게 조회할 수 있게 저장된 예약어입니다.
그래서 param뒤에 쿼리 파라미터의 키를 넣으면 값을 손쉽게 사용할 수 있습니다.
th:each
반복문을 사용할 때 쓰는 문법입니다.
<tr th:each="item : ${items}">위 코드처럼 사용하는데요 items에 담겨있는 데이터를 하나씩 item 변수에 담아 사용합니다
JSTL의 forEach 구문과 같은 역할을 합니다.
추가적인 문법이 알고 싶다면 타임리프 공식 사이트를 확인해보세요
https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html#listing-seed-starter-data
'노트' 카테고리의 다른 글
| TIL 스프링 HTTP 요청, 응답 데이터 처리 (0) | 2022.10.09 |
|---|---|
| TIL 스프링의 기본 기능 (1) | 2022.10.08 |
| 2022.06.21 TIL (0) | 2022.06.21 |
| 토이 프로젝트 주식 커뮤니티 만들기(9) - google chart 이용 그래프 그리기 (0) | 2022.06.17 |
| 토이 프로젝트 주식 커뮤니티 만들기(8) - JSP 글쓰기 (0) | 2022.06.14 |