본문 바로가기
IT/Java

Tymeleaf 란?

by 성준하이 2023. 1. 24.
반응형
'템플릿 엔진'의 일종. html 태그에 속성을 추가해 페이지에 동적으로 값을 추가하거나 처리할 수 있다.
템플릿 엔진이란?

지정된 템플릿 양식과 데이터가 합쳐져 html 문서를 출력하는 소프트웨어.

 

크게 서버 템플릿 엔진과 클라이언트 템플릿 엔진으로 나뉘는데, 타임리프는 전자에 해당하니 이에 대해서만 간단히 설명하겠다.


서버에서 DB 또는 API 등을 통해 가져온 데이터를 미리 정의된 템플릿에 넣어 html을 그려내 클라이언트에 전달해준다. 즉, html 코드에서 고정적으로 사용되는 부분은 템플릿으로 만들어두고 동적으로 생성되는 부분만 템플릿 특정 장소에 끼워넣는 방식으로 동작할 수 있게 해준다.

 

템플릿 엔진의 장점

  1. 코드 양 ↓
  2. 재사용성 ↑
  3. 유지보수에 용이

 

여러 서버 템플릿 엔진의 특징

  • JSP: 스프링 부트에서 비권장
  • Velocity: 스프링 부트에서 비권장
  • Freemarker: 템플릿 엔진으로서 기능이 너무 다양함. 숙련도 낮은 경우 비즈니스 로직이 추가됨.
  • Thymeleaf: 스프링에서 권장. 문법이 어려움.
  • Mustache: 심플하고 서버, 클라 모두 사용 가능.

 

jsp를 예전에 많이 사용한 경험자로 비슷한 서블릿 언어라고 외우곤 한다.

더보기
  • <input type="text" value="test" th:value="${item}"> <!--th:value 타임리프의 문법을 이용해 value 설정-->

이런식으로 사용이 되고 형식과 문법은 jsp에서 사용하는 문법과 매우 유사하다.

그리고 타임리프를 통해 렌더링 된 html 페이지를 열어도 웹 브라우저는 th: 속성을 알지 못한다.

 

타임리프 사용

타임리프를 사용하기 위해서는 다른 라이브러리들 처럼 라이브러리를 등록해야한다.

ThymeleafViewResolver를 등록하면 되고

Gradle - build.gradle

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

 

Maven - pom.xml

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

 

이렇게 등록이 가능하다.

 

다음 프로퍼티스 파일에 타임리프에 대한 설정을 할수 있다.

  • spring.thymeleaf.prefix=classpath:/templates/
  • spring.thymeleaf.suffix=.html

그밖에 다양한 설정은 아래 사이트에서 확인바란다.

https://docs.spring.io/spring-boot/docs/2.4.3/reference/html/appendix-application-properties.html#common-application-properties-templating

 

Common Application properties

 

docs.spring.io

 

그리고 마지막으로 사용할 html파일에 태그를 추가하면 된다.

 

문법의 속성은 아래 표를 참고하여 th 태그를 사용해서 구현이 가능하다.

ex: th:text="${변수명}"

표현 설명 예제
@{ ... } URL 링크 표현식 th:href="@{/css/bootstrap.min.css}"
th:href="@{/{itemId}/edit(itemId=${item.id})}"
| ... | 리터럴 대체 th:text="|Hi ${user.name}!|"
(= th:text="'Hi '+${user.name}+'!'"
${ ... } 변수 th:text=${user.name}
th:each 반복 출력 <tr th:each="item: ${items}">
  <td th:text="${item.price}">100</td>
</tr>
*{ ... } 선택 변수 <tr th:object="${items}">
  <td th:text="*{price}">100</td>
</tr>
#{ ... } 메시지. properties 같은 외부 자원에서 코드에 해당하는 문자열 get. th:text="#{member.register}"
반응형

'IT > Java' 카테고리의 다른 글

openfeign 이란?  (23) 2023.01.29
java eclipse 에서 에러(The method METHOD is undefined for the type )  (9) 2023.01.27
[JASYPT] 프로퍼티 암호화  (4) 2023.01.23
AnyEdit - 이클립스 플러그인  (9) 2023.01.22
자바에서 상수  (11) 2023.01.20

댓글