Thymeleaf

Thymeleaf (타임리프)

타임리프는 서버 사이드 Java 템플릿 엔진입니다. HTML, XML, JavaScript, CSS 등의 마크업 언어를 사용하여 동적 웹 페이지를 생성하는 데 사용됩니다. 타임리프는 간단하고 직관적인 구문을 제공하며, Spring Framework와의 통합이 용이합니다.

Spring Framework 에서의 템플릿 엔진으로 사용하던 JSP 및 JSP 라이브러리 기능들을 모두 대체할 수 있는 템플릿 엔진이다.

템플릿 엔진이란?

템플릿 엔진은 동적 웹 페이지를 생성하기 위해 사용되는 도구입니다. 템플릿 엔진은 미리 정의된 템플릿과 데이터를 결합하여 최종적으로 웹 페이지를 생성합니다. 이를 통해 개발자는 동일한 템플릿을 사용하여 다양한 데이터를 동적으로 출력할 수 있습니다. 템플릿 엔진은 주로 서버 사이드에서 실행되며, 클라이언트에게 완성된 HTML을 제공합니다.

타임리프 주요 기능

•

데이터 바인딩: 타임리프는 서버 사이드에서 데이터를 템플릿에 바인딩하여 동적으로 웹 페이지를 생성할 수 있습니다.

•

조건문과 반복문: 타임리프는 if문과 반복문을 사용하여 템플릿에서 복잡한 로직을 구현할 수 있습니다.

•

국제화 지원: 타임리프는 다국어 지원을 위한 국제화 기능을 제공하여 다양한 언어로 웹 페이지를 표시할 수 있습니다.

타임리프 문법

•

타임리프 블록

◦

th:block

•

타임리프 출력

◦

th:text

◦

th:html

◦

th:href

•

타임리프 제어문

◦

조건문

▪

th:if

▪

th:switch

◦

반복문

▪

th:each

•

타임리프 th:object

•

타임리프 form

•

타임리프 세션 정보 가져오기

•

타임리프 자바 메소드 호출

타임리프 블록

타임리프 <th:block>

타임리프 th:block은 타임리프의 블록 태그로, HTML 요소를 그룹화하고 조건문, 반복문 등을 적용하기 위해 사용됩니다. th:block 태그 내부의 요소들은 독립적인 블록으로 처리되며, 타임리프 표현식과 함께 사용하여 동적인 웹 페이지를 구성할 수 있습니다.

<th:block> ... </th:block>
HTML
복사

타임리프 출력

타임리프 <th:text>

타임리프 th:text는 태그 내부의 텍스트를 동적으로 설정하는 데 사용됩니다. 이를 통해 서버에서 받은 데이터를 웹 페이지에 출력할 수 있습니다.

<th:text="${data}"></th:text>
HTML
복사

위의 예시에서는 data 변수의 값을 해당 태그의 텍스트로 설정합니다.

타임리프 <th:html>

타임리프 th:html은 HTML 요소 안에 HTML 코드를 동적으로 설정하는 데 사용됩니다. 이를 통해 서버에서 생성된 HTML을 웹 페이지에 삽입할 수 있습니다.

<th:html>${htmlData}</th:html>
HTML
복사

위의 예시에서는 htmlData 변수에 저장된 HTML 코드를 해당 태그 안에 동적으로 삽입합니다.

타임리프 <th:href>

타임리프 th:href는 HTML 요소의 href 속성을 동적으로 설정하는 데 사용됩니다. 이를 통해 서버에서 생성된 링크를 웹 페이지에 적용할 수 있습니다.

<a th:href="@{/path/to/page}">Link</a>
HTML
복사

위의 예시에서는 "/path/to/page" 경로로 이동하는 링크를 생성합니다.

<a th:href="@{/path/to/page(param1=${value1}, param2=${value2}">Link</a>
HTML
복사

위와 같이 th:href 속성으로 @{ } 기호를 사용하면,

(파라미터1=값1, 파라미터2=값2) 형식으로 요청 파라미터를 렌더링할 수 있다.

ex) param1: 10, param2 : 20

<a th:href="/path/to/page?param1=10&param2=20">Link</a>
HTML
복사

th:href="@{}"와 href="" 차이

th:href="@{}"는 타임리프의 링크 표현식으로, 타임리프가 제공하는 기능을 사용하여 동적으로 링크를 설정할 수 있습니다. 반면 href=""는 정적인 방식으로 링크를 지정하는 HTML 속성입니다.

•

th:href="@{}" 예시: <a th:href="@{/path/to/page}">Link</a>

•

href="" 예시: <a href="/path/to/page">Link</a>

타임리프의 th:href는 애플리케이션 경로와 상대경로를 자동으로 처리하므로, 애플리케이션 내부에서 이동하는 링크를 편리하게 생성할 수 있습니다.

타임리프 제어문

조건문

•

<th:if>

•

<th:switch>

타임리프 <th:if>

타임리프 th:if는 조건문을 사용하여 템플릿에서 특정 부분을 조건에 따라 보여주거나 숨길 수 있습니다. 조건문은 타임리프 표현식으로 작성되며, 해당 조건이 참일 때만 해당 요소가 표시됩니다.

<th:if="${condition}">
    ...
</th:if>
HTML
복사

위의 예시에서는 condition이 참일 때에만 해당 요소가 표시됩니다.

<th:if> 조건문 예시

boolean 타입의 조건식

값 비교

객체의 변수 비교

문자열 비교

boolean 타입의 조건식

boolean checked = true;  // 또는 false
Java
복사

<th:if="${checked}">
	<h1>checked 조건이 true 일때</h1>
</th:if>
HTML
복사

값 비교

int age = 20;  
Java
복사

<th:if="${ age >= 20 }">
	<h1>age >= 20 조건이 만족할 때</h1>
</th:if>
HTML
복사

객체의 변수 비교

public class Person {
	String name = "ALOHA";
	int age = 20;  
}
Java
복사

<th:if="${ person.age >= 20 }">
	<h1>age >= 20 조건이 만족할 때</h1>
</th:if>
HTML
복사

문자열 비교

public class Person {
	String name = "ALOHA";
	int age = 20;  
}
Java
복사

문자열 비교도 == 기호로 비교가 가능하다.

<th:if="${ person.name == 'ALOHA' }">
	<h1>age >= 20 조건이 만족할 때</h1>
</th:if>
HTML
복사

#strings 유틸리티 객체를 사용하여 equlas() 함수를 비교할 수 있다.

#strings.equals( 문자열1, 문자열2 )

<th:block th:if="${ person != null && #strings.equals( person.name, 'ALOHA' ) }">
    <h1 th:text="${ person.name }"></h1>
</th:block>
HTML
복사

문자열 등 객체의 변수 비교 시, 객체가 null 인지 체크하는 것이 유의한다.

<th:block th:if="${ person != null and person.name == 'ALOHA' }">
    <h1 th:text="${ person.name }"></h1>
</th:block>
HTML
복사

AND 연산을 and 또는 && 로 적용할 수 있다.

<th:block th:if="${ person != null && #strings.equals( person.name, 'ALOHA' ) }">
    <h1 th:text="${ person.name }"></h1>
</th:block>
HTML
복사

삼항 연산자를 이용하여 null 체크를 할 수 있다.

<h1 th:text="${ person == null ? '이름없음' : person.name }"></h1> 
HTML
복사

타임리프 <th:switch>

타임리프 th:switch는 switch문과 비슷한 동작을 수행하여 템플릿에서 다양한 경우에 따라 다른 동작을 실행할 수 있습니다. 각 경우는 타임리프 th:case 태그로 정의되며, 조건에 따라 해당 경우가 실행됩니다.

<th:switch="${variable}">
    <th:case="value1">...</th:case>
    <th:case="value2">...</th:case>
    <th:case="value3">...</th:case>
    ...
</th:switch>
HTML
복사

위의 예시에서는 variable의 값에 따라 해당하는 경우의 코드 블록이 실행됩니다.

반복문

타임리프 <th:each>

타임리프 th:each는 반복문을 사용하여 템플릿에서 동일한 요소를 여러 번 출력할 수 있습니다. 반복문은 타임리프 표현식으로 작성되며, 지정된 데이터 컬렉션의 각 항목에 대해 반복하여 요소를 생성합니다.

<th:block th:each="item : ${items}">
    ...
</th:block>
HTML
복사

위의 예시에서는 items 컬렉션의 각 항목에 대해 해당 요소가 반복적으로 생성됩니다.

items 에 배열 또는 컬렉션을 지정하여 전체 반복을 할 수 있습니다.

기본 반복문

반복 객체 속성

필터링 조건

중첩 반복문

isEmtpy()

기본 반복문

<th:block th:each="요소, iterStat : ${배열 or 컬렉션}">
    <th:block th:text="${ 요소 }"></th:block>
    <th:block th:text="${ 요소.변수 }"></th:block>
</th:block>
HTML
복사

iterStat : 반복 객체를 사용해서 index, count 등 순서 번호와 여러 필터링 조건값을 사용

반복 객체 속성

속성	설명
iterStat.index	0부터 시작하는 인덱스
iterStat.count	1부터 시작하는 순번
iterStat.size	컬렉션의 총 크기
iterStat.even	현재 인덱스가 짝수인지 (true 또는 false)
iterStat.odd	현재 인덱스가 홀수인지 (true 또는 false)
iterStat.first	첫 번째 요소인지 (true 또는 false)
iterStat.last	마지막 요소인지 (true 또는 false)

<th:block th:each="item, iterStat : ${items}">
  	index : <th:block th:text=${iterStat.index}></th:block>
  	count: <th:block th:text=${iterStat.count}></th:block>
  	size: <th:block th:text=${iterStat.size}></th:block>
    ...
</th:block>
HTML
복사

필터링 조건

<th:block th:each="요소, iterStat : ${배열 or 컬렉션}"
				  th:if="${ 조건 }">
    <th:block th:text="${ 요소 }"></th:block>
    <th:block th:text="${ 요소.변수 }"></th:block>
</th:block>
HTML
복사

th:each 반복 안에서, th:if="${ 조건 }" 조건에 만족하는 요소만 필터링하여 출력할 수 있다.

중첩 반복문

public class Users {
	public String username;
	public String password;
	public String name;
	
	public List<UserAuth> authList;
}
Java
복사

public class UserAuth {
	public String username;
	public String auth;
}
Java
복사

List<Users> userList;
Java
복사

<th:block th:each="user, iterStat : ${userList}">
  	<th:block th:text="${user.name}"></th:block>
    ...
    <th:block th:each="auth, iterStat : ${user.authList}">
	    <th:block th:text="${auth.username}"></th:block>
	    <th:block th:text="${auth.auth}"></th:block>
    ...
		</th:block>    
</th:block>
HTML
복사

isEmtpy()

지정한 컬렉션이 비어 있는지 확인하는 메소드

<th:block th:if="${ 컬렉션.isEmpty()}">


</th:block>
HTML
복사

<th:block th:if=" #lists.isEmpty( 컬렉션 ) ">


</th:block>
HTML
복사

th:classappend=”${ 조건 ? ‘속성1’ : ‘속성2’ }”

<th:block th:each=" item, iterStat : ${items}" >
    <tr class="row" th:classappend="${ iterStat.odd ? 'odd' : 'even' }">
        <td><th:block th:text="${iterStat.index}"></th:block></td>
        <td><th:block th:text="${iterStat.count}"></th:block></td>
        <td><th:block th:text="${iterStat.size}"></th:block></td>
        <td><th:block th:text="${item}"></th:block></td>
        <td><th:block th:text="${iterStat.odd}"></th:block></td>
        <td><th:block th:text="${iterStat.even}"></th:block></td>
        <td><th:block th:text="${iterStat.first}"></th:block></td>
        <td><th:block th:text="${iterStat.last}"></th:block></td>
    </tr>
</th:block>
HTML
복사

th:classappend=’’ 조건을 만족하는 경우에 클래스 속성을 추가한다.

타임리프 th:object

타임리프의 th:object는 폼 처리를 간소화하는 데 사용되는 중요한 기능입니다. 이 속성을 사용하면 폼과 관련된 객체를 지정하여 해당 객체의 속성에 쉽게 접근할 수 있습니다.

주요 특징:

•

객체 바인딩: th:object를 사용하여 폼에 객체를 바인딩합니다. 이를 통해 폼 필드와 객체 속성을 쉽게 연결할 수 있습니다.

•

*{...} 문법: th:object와 함께 *{...} 문법을 사용하여 바인딩된 객체의 속성에 직접 접근할 수 있습니다.

•

코드 간소화: 반복적인 객체 참조를 줄여 코드를 더 간결하고 읽기 쉽게 만듭니다.

th:object="${객체}”

상위 태그에서 객체를 등록하고, 하위 태그에서 *{변수} 형태로 접근 가능

<div th:object="${user}">
    <ul>
        <li th:text="*{no}"></li>
        <li th:text="*{id}"></li>
        <li th:text="*{username}"></li>
        <li th:text="*{password}"></li>
        <li th:text="*{name}"></li>
        <li th:text="*{ #dates.format( createdAt, 'yyyy-MM-dd HH:mm:ss' ) }"></li>
        <li th:text="*{ #dates.format( updatedAt, 'yyyy-MM-dd HH:mm:ss' ) }"></li>
    </ul>
</div>
HTML
복사

타임리프 form

th:field="*{변수}" id, name, value 속성을 자동으로 생성

<form action="" method="post" th:object="${user}">
    <input type="text" th:field="*{no}">  <br>  
    <input type="text" th:field="*{id}">    <br>
    <input type="text" th:field="*{username}">  <br>
    <input type="text" th:field="*{password}">  <br>
    <input type="text" th:field="*{name}">  <br>
</form>
HTML
복사

위와같이 코드를 작성하면 실제로는 아래와 같이 랜더링된다.

<form action="" method="post">
	<input type="text" id="no" name="no" value="1">  <br>  
	<input type="text" id="id" name="id" value="c8f3ed9e-b16e-4d94-9c5c-1eaf1e5b17f1">    <br>
	<input type="text" id="username" name="username" value="ALOHA">  <br>
	<input type="text" id="password" name="password" value="123456">  <br>
	<input type="text" id="name" name="name" value="알로하">  <br>
</form>
HTML
복사

라디오 버튼 (input type=”radio”) 체크하기

<form action="" method="post" th:object="${user}">
	...
	<input type="radio" id="male" value="남자" name="gender" th:checked="*{ gender == '남자' }">
	<label for="male">남자</label>
	<input type="radio" id="female" value="여자" name="gender" th:checked="*{ gender == '여자' }">
	<label for="female">여자</label>
	...
</form>
HTML
복사

선택 상자 (select) 체크하기

select 에 th:field="*{type}" 를 사용하면, type 값과 일치하는 option 을 자동으로 선택

<form action="" method="post" th:object="${user}">
	...
	<select th:field="*{type}">
	    <option value="사용자 타입" disabled>사용자 타입</option>
	    <option value="사용자">사용자</option>
	    <option value="관리자">관리자</option>
  </select>
	...
</form>
HTML
복사

th:selected=”${ 조건 }”, th:selected=”*{ 조건 }” 형태로 selected 여부를 지정할 수 도 있음

<form action="" method="post" th:object="${user}">
	...
	<select name="type">
	    <option value="선택안함" th:selected="*{ type == null }">선택안함</option>
      <option value="사용자" th:selected="*{ type == '사용자' }">사용자</option>
      <option value="관리자" th:selected="*{ type == '관리자' }">관리자</option>
  </select>
	...
</form>
HTML
복사

날짜 (input type=”date”) 데이터를 값을 지정하기 ‘yyyy-MM-dd’ 포맷을 값을 지정해주면 들어간다

<form action="" method="post" th:object="${user}">
	...
	<input type="date" th:value="*{ #dates.format( createdAt, 'yyyy-MM-dd' ) }"   
                     id="createdAt" name="createdAt"> <br>
  <input type="date" th:value="*{ #dates.format( updatedAt, 'yyyy-MM-dd' ) }"   
                     id="updatedAt" name="updatedAt"> <br>
	...
</form>
HTML
복사

타임리프 세션 정보 가져오기

// 로그인 유저
Users loginUser = new Uers();
loginUser.setNo(1L);
loginUser.setId( UUID.randomUUID().toString() );
loginUser.setUsername("ALOHA");
loginUser.setPassword("123456");
loginUser.setName("오승원");
loginUser.setGender("여자");        // 남자 여자 
loginUser.setType("관리자");          // 사용자 관리자
loginUser.setCreatedAt(new Date());
loginUser.setUpdatedAt(new Date());
loginUser.setAuthList(authList);

session.setAttribute("loginUser", loginUser);
model.addAttribute("loginUser", loginUser);
Java
복사

@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class Users {
    private Long no;
    private String id;
    private String username;   
    private String password;   
    private String name;   

    private String gender;  
    private String type;    

    private Date createdAt;
    private Date updatedAt;

    List<UserAuth> authList;

    // 사용자 권한 확인 메소드
    public boolean containsAuth(String auth) {
        for (UserAuth userAuth : authList) {
            if (userAuth.getAuth().equals(auth)) {
                return true;
            }
        }
        return false;
    }
}
Java
복사

<!-- 세션 가져오기 -->
<h2>${session.loginUser}</h2>
<h3 th:text="${session.loginUser.name}"></h3>
<h3 th:text="${session.loginUser.username}"></h3>
<h3 th:text="${session.loginUser.password}"></h3>
HTML
복사

타임리프 자바 메소드 호출

// 권한
UserAuth roleUser = UserAuth.builder().auth("ROLE_USER").build();
UserAuth roleAdmin = UserAuth.builder().auth("ROLE_ADMIN").build();
List<UserAuth> authList = List.of( roleUser, roleAdmin );

// 로그인 유저
Users loginUser = new Uers();
loginUser.setNo(1L);
loginUser.setId( UUID.randomUUID().toString() );
loginUser.setUsername("ALOHA");
loginUser.setPassword("123456");
loginUser.setName("오승원");
loginUser.setGender("여자");        // 남자 여자 
loginUser.setType("관리자");          // 사용자 관리자
loginUser.setCreatedAt(new Date());
loginUser.setUpdatedAt(new Date());
loginUser.setAuthList(authList);
Java
복사

@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class Users {
    private Long no;
    private String id;
    private String username;   
    private String password;   
    private String name;   

    private String gender;  
    private String type;    

    private Date createdAt;
    private Date updatedAt;

    List<UserAuth> authList;

    // 사용자 권한 확인 메소드
    public boolean containsAuth(String auth) {
        for (UserAuth userAuth : authList) {
            if (userAuth.getAuth().equals(auth)) {
                return true;
            }
        }
        return false;
    }
}
Java
복사

@Data
@Builder
public class UserAuth {
    private String username;
    private String auth;
}
Java
복사

...
<input type="checkbox" name="authList" id="role_user" 
			 th:checked="${ loginUser.containsAuth('ROLE_USER') }">
<label for="role_user">ROLE_USER</label>
<input type="checkbox" name="authList" id="role_admin" 
			 th:checked="${ loginUser.containsAuth('ROLE_ADMIN') }">
<label for="role_admin">ROLE_ADMIN</label>
<br>
HTML
복사

Users 객체의 containsAuth() 메소드를 호출하여 해당 객체가 특정 권한 (’ROLE_USER’, ‘ROLE_ADMIN’) 을 가지고 있는지 확인해봅니다.