Thymeleaf는 코드에서 어떻게 사용되는가?
Thymeleaf는 HTML 템플릿(.html) 안에서 사용되는 서버 사이드 템플릿 엔진이기 때문에 HTML 문법과 Thymeleaf 문법을 함께 사용한다. 일반적으로 Thymeleaf 문법은 HTML 요소의 속성으로 삽입되어 동적으로 데이터를 처리하고 제어한다.
HTML태그에서 Thymeleaf 속성을 사용하기 위해서는 반드시 html태그에 다음과 같이 Thymeleaf 네임스페이스 선언을 해줘야한다.
<html lang="en" xmlns:th="http://www.thymeleaf.org">
위 코드 중 xmlns:th="http://www.thymeleaf.org" 는 th 접두사를 사용하여 Thymeleaf의 템플릿 기능을 사용하겠다는 의미이다.
위와 같이 Thymeleaf 네임스페이스 선언을 했다면, Thymeleaf 문법을 HTML 속성으로 삽입할 때 th: 접두사를 추가하면 된다. 만약 th: 접두사를 추가하지 않으면 브라우저는 해당 속성을 일반적인 HTML 속성으로 처리할 것이다.
이렇게 함으로써 정적인 HTML 템플릿을 동적으로 구성하고 서버 측에서 데이터를 처리할 수 있다. 그럼 본격적으로 Thymeleaf 기본 문법을 학습해보자.
1. 변수 표현식
Thymeleaf에서는 "${...}"(큰따옴표도 반드시 포함)을 사용하여 서버로부터 전달된 데이터를 HTML 템플릿에 삽입할 수 있다. 이를 변수 표현식이라고 한다.
<p>Welcome, <span th:text="${user.name}"></span>!</p>
위 예제에서 ${user.name}은 서버에서 받은 user 객체의 name 속성을 나타낸다. 이 값은 <span> 요소의 텍스트로 삽입된다.
2. 텍스트로 변환
위 예제를 보면 th:text 속성이 사용된다. th:text 속성은 Thymeleaf에서 가장 자주 사용되는 속성 중 하나로, HTML 요소의 텍스트 내용을 동적으로 설정할 때 사용된다. 이 속성을 사용하면 서버에서 전달된 데이터를 HTML 템플릿에 삽입할 수 있다.
3. 반복문
Thymeleaf에서는 th:each 속성을 사용하여 리스트나 배열과 같은 컬렉션의 요소를 반복할 수 있다.
<ul>
<li th:each="item : ${items}" th:text="${item}"></li>
</ul>
${items}는 컨트롤러에서 전달된 리스트이며, th:each 속성을 통해 items의 각 요소를 순회한다. 각 항목은 <li> 요소로 반복해서 생성된다.
4. 조건문
Thymeleaf에서는 th:if, th:unless, th:switch, th:case 등의 속성을 사용하여 조건문을 작성할 수 있다.
<div th:if="${user.isAdmin}">
<p>Welcome, Admin!</p>
</div>
<div th:unless="${user.isAdmin}">
<p>Welcome, User!</p>
</div>
위 예제에서는 user.isAdmin이 true이면 첫 번째 <div>가, 그렇지 않으면 두 번째 <div>가 표시된다.
다음은 th:switch, th:case에 대한 예시코드이다. th:switch와 th:case 는 Java의 switch 문과 유사하게 작동한다.
<body>
<div th:switch="${day}">
<p th:case="'MONDAY'">Today is Monday.</p>
<p th:case="'TUESDAY'">Today is Tuesday.</p>
<p th:case="'WEDNESDAY'">Today is Wednesday.</p>
<p th:case="'THURSDAY'">Today is Thursday.</p>
<p th:case="'FRIDAY'">Today is Friday.</p>
<p th:case="'SATURDAY'">Today is Saturday.</p>
<p th:case="'SUNDAY'">Today is Sunday.</p>
<p th:case="*">Unknown day</p> <!-- Default case -->
</div>
</body>
- th:switch="${day}": day 변수의 값을 기준으로 여러 case를 처리한다.
- th:case="'VALUE'": day 변수의 값에 따라 특정 콘텐츠를 출력한다. 예를 들어, day가 'MONDAY'라면 "Today is Monday."라는 문장을 출력한다.
- th:case="*": 어떤 경우에도 해당되지 않는 경우에 사용된다. 이는 Java의 default 키워드와 유사다.
5. 속성 설정
Thymeleaf에서는 th:attr 속성을 사용하여 HTML 요소의 여러 속성을 동적으로 설정할 수 있다. 이는 여러 개의 개별적인 th: 속성을 사용하는 것보다 더 간편하고 깔끔할 수 있 다. 주로 조건에 따라 속성을 추가하거나 변경할 때 유용하게 사용된다. 예를 들어, 특정 조건에 따라 링크의 URL이 변경되거나, 링크 타이틀 속성을 동적으로 설정할 때 th:attr를 사용할 수 있다.
<a th:attr="href=@{${url}} title=${linkTitle}">Click me</a>
<a th:href="@{${url}}" th:title="${linkTitle}">Click me</a>
두 코드 모두 동일한 결과
링크의 URL과 링크 타이틀 속성을 동적으로 설정할 것이기 때문에 a 태그 안에 href와 title을 단독으로 쓰지 않고 앞에 반드시 th: 접두사를 추가해야한다. (두번째 코드 참고)
각 속성마다 th를 추가하지 않고 한번에 적용하고 싶을 때 attr을 사용한다. (첫번째 코드 참고)
코드를 차근히 살펴보자.
th:href="@{${url}}"
th:href 속성은 링크의 URL을 설정하는 속성
@{}는 Thymeleaf의 URL 표현식
${url}은 서버에서 전달된 URL
이렇게 함으로써 서버에서 전달된 URL에 따라 링크의 목적지가 동적으로 변경된다.
th:attr="title=${linkTitle}
th:attr 속성은 동적으로 링크의 타이틀을 설정하는 속성
${linkTitle}은 서버에서 전달된 링크의 타이틀
이번 글에서는 thymeleaf 기본 문법에 대해서 알아보았다. 다음 글에서는 thymeleaf를 이용하기 위한 초기 설정에 대해 알아보겠다.
'Springboot' 카테고리의 다른 글
| [Springboot] 서버 사이드 렌더링과 클라이언트 사이드 렌더링 (0) | 2024.05.17 |
|---|---|
| [SpringBoot] 템플릿 엔진 Thymeleaf는 무엇일까? (0) | 2024.05.17 |
| [Springboot] CSS 파일 불러올 때 경로 설정 문제 해결( <link> 관계가 stylesheet 일 때) (0) | 2024.04.02 |
