Spring Boot:Thymeleaf 기본 문법 정리

Thymeleaf

타임리프는 서버 측의 Java 템플릿 엔진으로 HTML, XML, JavaScript, CSS 등의 웹 환경에서 사용할 수 있다.

웹 브라우저를 통해 템플릿을 직접 열어 확인할 수 있기 때문에 디자인에 용이하다. 타임리프 템플릿은 원본 HTML 형태로 유지되면서 동적 데이터를 처리할 수 있도록 추가적인 데이터 속성을 이용한다.

스프링 MVC와의 통합이 지원되며 스프링 부트의 기본 템플릿 엔진으로 설정되어 있어 스프링 기반의 웹 애플리케이션 개발 시 주로 사용된다.

HTML 태그 내부에 th:라는 접두사로 시작하는 속성을 통해 동적인 데이터 바인딩, 조건문, 반복문 등을 처리한다. 서버 사이드에서 데이터를 바인딩하고 동적인 웹 페이지를 쉽게 생성할 수 있도록 도와준다.

타임리프의 기본 문법은 다음과 같다.

1. 변수 표현: ${...}를 사용하여 변수를 표현한다.

<p th:text="${name}">Name</p>

2. 조건문: th:if를 사용하여 조건문을 표현한다.

<div th:if="${condition}">
  <p>Condition is true.</p>
</div>

3. 반복문: th:each를 사용하여 반복문을 표현한다.

<ul>
  <li th:each="item : ${items}" th:text="${item}"></li>
</ul>

4. URL 링크: @{...}를 사용하여 URL 링크를 표현한다.

<a th:href="@{/home}">Home</a>

5. 속성 값 설정: th:value, th:src 등을 사용하여 HTML 요소의 속성 값을 설정한다.

<input type="text" th:value="${name}" />
<img th:src="@{/images/logo.png}" />

6. 문자열 결합: |...|를 사용하여 문자열을 결합한다.

<p th:text="|Welcome, ${name}!|">Welcome, User!</p>

7. 렌더링 시 제거: th:block는 HTML 태그가 아닌 타임리프에서만 사용하는 문법으로 HTML에서 실제로 렌더링되지 않는다.
   이 태그 안에 들어있는 속성들이나 내용은 그대로 렌더링되며, 주로 코드의 가독성을 높이거나 여러 태그에 동일한 속성을 적용할 때 사용된다.

<div th:text="${message}"></div>
<p th:text="${message}"></p>

상단의 코드와 같이 th:text 속성이 중복되어 사용되고 있는 경우 th:block을 사용하면 다음처럼 코드를 더 간결하게 만들 수 있다.

<th:block th:text="${message}">
    <div></div>
    <p></p>
</th:block>

위의 코드에서 th:block 태그는 실제로 렌더링되지 않지만, 그 안의 div 태그와 p 태그에 th:text="${message}"가 적용되어 각각 메시지를 출력한다.