타임리프(Thymeleaf) 템플릿 엔진 알아보기(1) - 조건문,반복문,기본 문법, 사용법

타임리프 소개

타임리프는 서버에서 html을 동적으로 렌더링 할 때 사용하는 템플릿 엔진이다.

간단한 조건문(if, else), 변수표현, 각종 연산(삼항연산, 산수, 비교, 문자, 참 거짓)이 가능하다.

<JSP와의 차이점>

자바에서 잘 알고있는, 브라우저가 인식 할 수 없는 태그라이브러리를 사용하는 JSP와의 가장 큰 차이점은 확장자가 .HTML이며 서버 가동 없이도 순수한 html로서 활용할 수 있다는 점 이다.

<장점>

앞서 말했듯이 순수 html로 활용 할 수 있어서 쉽게 수정이 가능하다는 장점이 있다.

또한 사용법이 매우 쉬운 편이라 백엔드 개발자가 빠르게 개발 할 일이 있거나, 지나치게 동적이지 않은 웹페이지를 만들때에도 유용하다.

디자이너와의 분업에서도 JSP보다 강점이 있다.

스프링과의 연동성이 뛰어나다는 점도 장점이다.

의존성 추가

Gradle

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

Maven 프로젝트

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

타임리프 문법(사용법)

타임리프를 사용하려면 먼저 컨트롤러에서 뷰에서 표시할 데이터를 준비해야한다.

이때 Model 인터페이스를 사용하는데 요청 핸들러 메서드의 인수에 Model 타입을 전달해야한다

public String home(Model model) {}

이제 Model의 attribute 메서드를 사용할 수 있게 되는데

attribute 메서드에는 (이름,값) 을 저장한다.

이제, 컨트롤러에서 Model 에 저장해 보내준 객체를 표현할 수 있습니다.

예를 들어 alert의 메세지를 띄워주기 위해 message를 표현하기 위해, 다음과 같이 모델에 msg의 내용을 담아 home(.html)에 전달 할 수 있다.

public String home(Model model) {
	model.addAttribute("msg", "안녕하세요");
	return "home";
}

HTML 태그에 다음의 코드를 추가해주어 사용한다.

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

변수 표현

타임리프의 기본경로는 패키지 안 /templates 경로에 요청메서드의 반환값 + .html 이 참조된다.

<script th:inline="javascript">
    /*<![CDATA[*/
    var message = [[${msg}]]

    if([[${msg}]]) {
        alert(message);
        history.back();
    }
    /*]]>*/
</script>

타임리프의 변수를 javascript 안에서 사용하기 위해

/*<![CDATA[*/ 와 th:inline="javascript"를 사용해 주어야 한다.

이 외에도, 간단하게

th:text=${출력문자}

<span th:text="${param.name}"></span>

[[ ${출력문자}]] - 인라인 처리

<span>안녕하세요 [[${name}]]님</span>

로 나타낼 수 있다.

고정값과 변수를 조합하고 싶은 경우 이 방법이 더 편리할 것이다.

조건분기 사용

th:if 로 조건문을 표현할 수 있다.

<span th:if="${isTrue}"> 맞습니다. <span>

if ~unless문으로도 표현할 수 있다.

<span th:if="${text} == 'a'"> a입니다. </span>
<span th:unless="${text} == 'b'"> b입니다. </span>

th:switch 로 switch문도 표현할 수 있다.

<div th:switch="${name}">
	<p th:case="철수" th:text="${철수}"></p>
	<p th:case="영희" th:text="${영희}"></p>
	<p th:case="*"> 조건에 없습니다. </p>
</div>

반복문 사용

for, while과 같은 반복문을 th:each로 사용할 수 있다.

아래와 같이 th:each="요소 저장용 변수" : ${반복 처리하는 객체} 로 사용한다.

<th:block th:each="summoner : ${summoner}">
	<div>
		소환사명 <span th:text="${summoner.name}"></span>
		소환사 티어 <span th:text="${summoner.tier}"></span>
	</div>
</th:block>

이떄, tr /td 외에도 타임리프에서 지원하는 th:block 태그를 이용하여 th:each를 사용할 수 있다.

+ th:block 태그를 이용하여 if unless문도 div블럭 단위로 활용할 수 있다

지역변수 사용

th:with="변수 이름 = 값" 으로 변수에 값을 할당 할 수 있다.

이때 변수의 범위는 정의된 태그 내부에서만 사용할 수 있음에 주의한다.

<div th:with="a=1">
	<span th:text=${a}></span>
</div>

저작자표시

'Web > Java, Kotlin' 카테고리의 다른 글

[Spring View Manipulation] 타임리프(Thymeleaf) SSTI 취약점 (0)	2024.08.23
[Android] Glide 이미지 재로딩시 실패 오류 해결 (0)	2023.10.11
[Android / Kotlin] Recyclerview + data binding 데이터 값에 따른 이미지 출력 여부 결정 (0)	2023.09.19
[Spring,Spring boot] Spring 4 shell 취약점 분석 및 재현 (0)	2023.01.27