반응형
속성 바인딩
Thymeleaf에서는 HTML 요소와 백엔드 데이터를 연결하는 속성 바인딩 기능을 제공합니다. 이를 통해 동적인 데이터를 HTML 요소에 표시하거나 사용자 입력을 백엔드로 전달할 수 있습니다. 이번 챕터에서는 Thymeleaf에서의 속성 바인딩에 대해 알아보겠습니다.
1. 속성 바인딩 기본 구문
Thymeleaf에서의 속성 바인딩은 th: 접두사를 사용하여 정의됩니다. 이 접두사를 사용하여 HTML 속성에 Thymeleaf 표현식을 삽입할 수 있습니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Attribute Binding Example</title>
</head>
<body>
<a th:href="@{${url}}">Go to Homepage</a>
</body>
</html>
위의 코드에서 th:href 속성은 ${url}로 바인딩되어 있습니다. 이는 백엔드에서 모델에 추가된 url 속성의 값으로 대체됩니다.
2. 속성 바인딩 유형
Thymeleaf에서는 다양한 유형의 속성 바인딩을 지원합니다. 일반적으로 사용되는 몇 가지 유형은 다음과 같습니다.
- th:text: 텍스트 내용을 표시하는 속성에 데이터를 바인딩합니다.
- th:src, th:href: 이미지 소스 또는 링크 주소에 데이터를 바인딩합니다.
- th:if, th:unless: 조건에 따라 요소의 가시성을 제어합니다.
- th:class, th:id, th:style: 클래스, 아이디, 스타일을 동적으로 설정합니다.
3. 코드 예제
다음은 Thymeleaf의 속성 바인딩을 사용하는 간단한 예제입니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Attribute Binding Example</title>
</head>
<body>
<p th:text="${message}">Default message</p>
<img th:src="@{${imageSrc}}" alt="Image">
<a th:href="@{/home}" th:if="${isLoggedIn}">Go to Home</a>
<div th:class="${isError} ? 'error' : 'success'">Message Box</div>
</body>
</html>
위의 코드에서 ${message}, ${imageSrc}, ${isLoggedIn}, ${isError}는 각각 백엔드에서 제공되는 데이터를 나타냅니다. Thymeleaf는 이러한 데이터를 HTML 속성에 바인딩하여 동적으로 템플릿을 렌더링합니다.
Thymeleaf의 속성 바인딩 기능을 활용하면 HTML과 백엔드를 효율적으로 연결하여 동적인 웹 페이지를 만들 수 있습니다. 이를 통해 사용자에게 보다 풍부한 사용자 경험을 제공할 수 있습니다.
반응형
'Thymeleaf' 카테고리의 다른 글
| 10. Thymeleaf 템플릿 - 3 (0) | 2024.02.24 |
|---|---|
| 9. Thymeleaf 템플릿 - 2 (0) | 2024.02.22 |
| 8. Thymeleaf 템플릿 - 1 (0) | 2024.02.22 |
| 7. Thymeleaf 기본 문법 - 5 (0) | 2024.02.22 |
| 5. Thymeleaf 기본 문법 - 3 (0) | 2024.02.22 |
| 4. Thymeleaf 기본 문법 - 2 (0) | 2024.02.22 |
| 3. Thymeleaf 기본 문법 - 1 (0) | 2024.02.22 |
| 2. Thymeleaf 소개 - 2 (0) | 2024.02.22 |
