[html] Thymeleaf 'th:if'

 

Thymeleaf 조건부 렌더링 예제

 

1. Thymeleaf란?

Thymeleaf는 자바 기반의 서버 사이드 템플릿 엔진으로, HTML, XML, JavaScript, CSS 등 다양한 형식의 템플릿을 처리할 수 있습니다. 주로 Spring Framework와 함께 사용되며, HTML을 템플릿으로 사용하고, 동적으로 데이터를 삽입할 수 있게 해줍니다. Thymeleaf는 XML 문서와 유사한 구조로 작동하며, 사용자 인터페이스를 동적으로 생성할 수 있습니다.

 

Thymeleaf는 특히 HTML을 생성하는 데 유용하며, HTML을 미리 보기 없이 바로 작성할 수 있는 특징이 있습니다. 또한 템플릿을 개발자가 쉽게 읽고 이해할 수 있도록 도와줍니다. `th:if`, `th:unless`와 같은 조건부 렌더링 태그를 활용하여 HTML 요소가 동적으로 출력되거나 숨겨지도록 설정할 수 있습니다.

 

2. th:if

th:if는 주어진 조건이 true일 때 해당 HTML 요소를 렌더링합니다. 조건이 false일 경우, 해당 요소는 렌더링되지 않습니다.

다음은 `th:if`의 사용 예제입니다:

<div th:if="${user.id}">
    <p>Welcome, User</p>
</div>
<div th:if="${!user.id}">
    <p>Please input user id</p>
</div>
            

위의 예제에서, `user.id` 값이 존재하면 "Welcome, User" 메시지가 렌더링되고, 값이 없으면 "Please input user id" 메시지가 렌더링됩니다. `

` 요소는 조건에 따라 렌더링 여부가 결정됩니다.

 

3. th:unless

th:unless는 `th:if`와 반대로 동작하며, 주어진 조건이 false일 때 해당 HTML 요소를 렌더링합니다. 조건이 true일 경우, 해당 요소는 렌더링되지 않습니다.

다음은 `th:unless`의 사용 예제입니다:

<div th:unless="${user.id}">
    <p>Please input user id</p>
</div>
            

위의 예제에서, `user.id` 값이 없으면 "Please input user id" 메시지가 렌더링됩니다. 만약 `user.id` 값이 존재하면 해당 `

` 요소는 렌더링되지 않습니다.

 

4. th:if와 th:unless 비교

th:if는 조건이 true일 때 HTML 요소를 렌더링하고, th:unless는 조건이 false일 때 HTML 요소를 렌더링합니다. 이 두 속성은 조건부 렌더링을 처리할 때 매우 유용합니다.

예를 들어, 아래와 같은 방식으로 두 속성을 함께 사용할 수 있습니다:

<div th:if="${user.id}">
    <p>Welcome, User</p>
</div>
<div th:unless="${user.id}">
    <p>Please input user id</p>
</div>
            

위의 예제에서는 `user.id`가 있으면 "Welcome, User"가 렌더링되고, 없으면 "Please input user id"가 렌더링됩니다. 이처럼 조건에 맞춰 다양한 내용을 동적으로 표시할 수 있습니다.

 

 

 

 

감사합니다 :)