개발자에게 필요한 일반적인 범위내의 기능은 튜토리얼 문서에 잘 나와있다.
타임리프 튜토리얼 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
타임리프 + 스프링 튜토리얼 https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html
타임리프(Thymeleaf)"는 서버 사이드 템플릿 엔진으로서 HTML 문서를 동적으로 생성하는 데 사용됩니다.
th:if 또는 th:each
타임리프의 자주 사용하는 속성에는 다음 3가지 유형이 있다. 이 3가지 유형만 알아도 여러 기능을 충분히 만들 수 있다.
- 분기문 속성
분기문 속성은 다음과 같이 사용한다.
th:if="${question != null}"위의 경우 question 객체가 null 이 아닌 경우에 해당 엘리먼트가 표시된다.
- 반복문 속성
반복문은 반복횟수만큼 해당 엘리먼트를 반복하여 표시한다. 반복문 속성은 자바의 for each 문과 유사하다.
th:each="question : ${questionList}"반복문은 다음과 같이 사용할 수도 있다.
th:each="question, loop : ${questionList}"추가한 loop 객체를 이용하여 루프 내에서 다음과 같은 속성을 사용할수 있다.
- loop.index - 반복 순서, 0부터 1씩 증가 (말 그대로 배열 0번부터 반복)
- loop.count - 반복 순서, 1부터 1씩 증가
- loop.size - 반복 객체의 요소 갯수 (예: questionList의 요소 갯수)
- loop.first - 루프의 첫번째 순서인 경우 true
- loop.last - 루프의 마지막 순서인 경우 true
- loop.odd - 루프의 홀수번째 순서인 경우 true
- loop.even - 루프의 짝수번째 순서인 경우 true
- loop.current - 현재 대입된 객체 (예: 위의 경우 question과 동일)
- 텍스트 속성
th:text=값 속성은 해당 엘리먼트의 텍스트로 "값"을 출력한다.
th:text="${question.subject}"
텍스트는 th:text 속성 대신에 다음처럼 대괄호를 사용하여 값을 직접 출력할수 있다.
<tr th:each="question : ${questionList}">
<td>[[${question.subject}]]</td>
<td>[[${question.createDate}]]</td>
</tr>th:object
th:object는 타임리프(Thymeleaf)에서 사용되는 속성(attribute) 중 하나로, 폼(form) 요소와 데이터 모델(객체) 간의 연결을 설정하는 데 사용됩니다. 주로 폼을 사용하여 데이터를 수정하고 업데이트할 때 데이터 모델의 필드와 폼 필드 간의 바인딩을 지정합니다. th:object를 사용하면 해당 폼 내에서 데이터 모델을 지정하고, th:field 속성을 통해 데이터 모델의 필드와 폼 필드를 연결할 수 있습니다.
th:object의 주요 역할은 다음과 같습니다:
-
데이터 모델 지정: th:object를 사용하여 폼 내에서 어떤 데이터 모델(객체)를 사용할 것인지를 지정합니다. 이것은 폼의 컨텍스트로서 데이터 모델의 필드를 사용할 수 있게 합니다.
-
데이터 바인딩: th:field 속성과 함께 사용하여 폼 필드와 데이터 모델의 필드를 연결합니다. 이를 통해 사용자 입력을 데이터 모델에 바인딩하고, 데이터 모델의 값을 폼 필드에 렌더링할 수 있습니다.
-
유효성 검사 오류 표시: th:object를 사용하여 연결된 데이터 모델의 유효성 검사 오류를 표시할 수 있습니다. 유효성 검사 오류 메시지를 폼에 표시하거나 관련된 필드에 연결된 오류 메시지를 처리할 수 있습니다.
예를 들어, 다음은 th:object를 사용하여 데이터 모델을 지정하고 th:field를 사용하여 폼 필드와 데이터 모델의 필드를 연결하는 방법을 보여줍니다:
<form th:object="${user}" method="post" action="/submit">
<label for="username">Username:</label>
<input type="text" id="username" th:field="*{username}" />
<span th:if="${#fields.hasErrors('username')}" th:errors="*{username}">Invalid username</span>
<label for="email">Email:</label>
<input type="email" id="email" th:field="*{email}" />
<span th:if="${#fields.hasErrors('email')}" th:errors="*{email}">Invalid email</span>
<button type="submit">Submit</button>
</form>
위의 코드에서 th:object="${user}"는 user 객체를 폼의 데이터 모델로 지정하고, th:field 속성을 사용하여 데이터 모델의 username 및 email 필드를 폼 필드에 연결합니다. 이렇게 하면 데이터 모델과 폼 간의 상호작용이 가능하며, 유효성 검사 오류 메시지를 표시할 수 있습니다.
th:field
th:field는 타임리프에서 사용되는 특별한 속성(attribute) 중 하나로, 주로 HTML 폼(form) 요소와 관련이 있습니다. th:field를 사용하면 서버 사이드에서 생성한 데이터 모델의 필드와 폼 필드를 연결하고, 데이터 모델의 값을 폼 필드에 렌더링하거나 사용자 입력을 데이터 모델에 바인딩하는 데 도움이 됩니다.
th:field의 주요 역할은 다음과 같습니다:
-
데이터 바인딩: th:field는 폼 필드와 데이터 모델의 필드를 연결합니다. 이를 통해 사용자가 입력한 데이터를 데이터 모델에 바인딩하고, 서버로 전송할 수 있습니다.
-
값 렌더링: th:field를 사용하여 데이터 모델의 값을 폼 필드에 렌더링할 수 있습니다. 이렇게 하면 사용자가 이전에 입력한 값을 폼 필드에 표시할 수 있습니다.
-
유효성 검사 오류 표시: th:field는 유효성 검사 오류가 발생한 경우 이를 표시할 수 있도록 도와줍니다. 예를 들어, 필드의 유효성 검사 오류가 있을 때 오류 메시지를 표시할 수 있습니다.
예를 들어, 다음은 th:field를 사용하여 폼 필드와 데이터 모델의 필드를 연결하고 해당 값을 렌더링하는 방법을 보여줍니다:
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" th:field="*{name}" />
<span th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Invalid name</span>
<label for="email">Email:</label>
<input type="email" id="email" th:field="*{email}" />
<span th:if="${#fields.hasErrors('email')}" th:errors="*{email}">Invalid email</span>
<button type="submit">Submit</button>
</form>
위의 코드에서 th:field는 데이터 모델의 name 및 email 필드를 폼 필드에 연결하고, 유효성 검사 오류가 있는 경우 오류 메시지를 표시합니다. 이를 통해 데이터 모델과 HTML 폼 간의 상호작용을 쉽게 처리할 수 있습니다.
#fields.hasErrors('*')는 #fields.hasAnyErrors()와 동일하고
#fields.errors('*')는 #fields.allErrors()와 동일하다.
th:fragment
th:fragmentsms Thymeleaf 템플릿 엔진에서 사용되는 속성으로, 템플릿의 일부를 이름 붙인 조각(fragment)으로 정의할 때 사용됩니다. 이를 통해 템플릿을 여러 부분으로 나누고, 각 부분을 재사용하거나 조건부로 포함시킬 수 있습니다.
th:fragment의 주요 특징은 다음과 같습니다:
-
th:fragment 속성은 HTML 요소에 사용됩니다.
-
템플릿에서 th:fragment를 사용하여 이름을 정의합니다. 이 이름은 해당 조각을 참조하는 데 사용됩니다.
-
조각은 일반적으로 템플릿 내에서 div, section, span 등의 HTML 요소로 둘러싸여 있습니다.
조각 내에 Thymeleaf 표현식(th:if, th:text, th:each 등)을 사용하여 동적으로 내용을 생성할 수 있습니다. -
다른 템플릿에서 th:insert 또는 th:replace와 함께 해당 th:fragment를 참조하여 내용을 포함하거나 대체할 수 있습니다.
-
예를 들어, 주어진 코드에서 th:fragment="formErrorsFragment"는 오류 메시지를 표시하는 부분을 정의합니다. 이 조각은 오류가 발생한 경우에만 표시되며, th:if 속성을 사용하여 조건부로 나타납니다. 다른 템플릿에서 이 조각을 th:insert 또는 th:replace를 사용하여 가져와서 사용할 수 있습니다.
이를 통해 템플릿을 모듈화하고 재사용 가능한 구성 요소로 나누는 데 도움이 됩니다.
