Spring Boot 02 Thymeleaf 속성 및 표현식

Kang.__.Mingu·2024년 10월 5일
Spring bootThymeleaf

Spring Boot

목록 보기
2/8

Thymeleaf

  • 서버에서 HTML 문서 또는 XML 문서를 동적으로 생성하여 제공하는 Server Side Template Engine

  • HTML 태그에 Thymeleaf 속성을 사용해 동적으로 뷰(View)를 생성하여 제공

  • 서버를 실행하지 않으면 정적인 HTML 문서로 사용되며 서버를 실행하면 동적인 HTML 문서로 생성되어 사용

  • JSP 태그 및 커스텀 태그(JSTL)을 사용할 수 없어 코드의 재사용 불가능 - JavaScript 사용

Thymeleaf 사용

  • html 태그에 th 네임스페이스를 추가해야만 Thymeleaf 사용 가능
<html xmlns:th="http://www.thymeleaf.org">

  • HTML 태그 속성에 [th:속성명="속성값"] 형식으로 Thymeleaf 속성을 작성해 태그내용 또는 HTML 태그의 속성값을 동적으로 변경하거나 추가하는 기능 제공

  • Thymeleaf 속성값으로 변수 표현식, 메세지 표현식, 링크 표현식, 선택 변수 표현식, 인라인 표현식 사용 가능

속성 및 표현식

text 속성

  • 속성값으로 태그내용을 변경하기 위한 Thymeleaf 속성

  • text 속성값으로 문자값을 사용할 경우 '' 사용

<h2 th:text="100">0</h2>
<h2 th:text="'Hi, Thymeleaf!!!'">Hello, Thymeleaf!!!</h2>

변수 표현식

  • Thymelaf 속성의 속성값으로 변수 표현식을 사용해 태그내용 변경

  • 변수 표현식: ${속성명} 형식으로 Scope 속성값을 Thymeleaf 속성값으로 사용하기 위한 표현식

  • 컨트롤러에서 model 객체서 속성을 넣어주고 사용

@Controller
@RequestMapping("/thymeleaf")
public class ThymeleafController {
	@GetMapping("/text")
    public String text(Model model) {
		model.addAttribute("dataOne", "Hi, Thymeleaf!!!");
		model.addAttribute("dataTwo", "<font color='red'>Hi, Thymeleaf!!!</font>");
	}
}
<h2 th:text="${dataOne}">Hello, Thymeleaf!!!</h2>

  • 컨트롤러에 dataTwo 속성 값은 HTML 태그가 포함되어 있는데 text 속성값에 HTML 태그가 있는 경우 태그를 문자값으로 처리한다.
<h2 th:text="${dataTwo}">Hello, Thymeleaf!!!</h2>

utext 속성

  • text 속성값에 HTML 태그가 포함되어 있다면 HTML 태그 내용까지 그대로 출력이 되지만 utext 속성을 사용하면 태그 내용을 변경해서 출력한다.

  • utext 속성: 속성값으로 태그내용을 변경하기 위한 Thymeleaf 속성

  • utext 속성값에 HTML 태그가 포함되어 있는 경우 HTML 태그로 출력 처리

<h2 th:utext="${dataTwo}">Hello, Thymeleaf!!!</h2>

인라인 표현식

  • 인라인 표현식을 사용해 Scope 속성값을 제공받아 사용 가능

  • 인라인 표현식: [[${속성명}]] 형식으로 표현해 Scope 속성값을 제공받아 사용하는 표현식

  • 인라인 표현식은 일반적으로 JavaScript에서 사용

  • utext 속성과 마찬가지로 속성값에 HTML 태그가 있는경우 HTML 태그로 출력 처리됨

<h2>[[${dataOne}]]</h2>
<h2>[(${dataTwo})]</h2>

객체를 만들어 속성값 출력

User DTO

@Data
@Builder
public class User {
	private String id;
	private String name;
	private String email;
}

ThymeleafController.java

  • @Builder 어노테이션을 사용한 DTO를 임시객체로 만들어 model속성값으로 제공
@Controller
@RequestMapping("/thymeleaf")
public class ThymeleafController {
	@GetMapping("/text")
	public String text(Model model) {
    	User user=User.builder()
        	.id("abc123")
            .name("홍길동")
            .email("abc@itwill.xyz")
            .build();
		model.addAttribute("user", user);
    }
}

result.html

  • 변수 표현식을 사용해 Scope 속성값으로 객체를 제공받아 필드값을 Thymeleaf 속성값으로 사용
<h2>아이디 = <span th:text="${user.id}">test</span></h2>
<h2>이름 = <span th:text="${user.getName()}">테스트</span></h2>
<h2>이메일 = <span th:text="${user['email']}">test@aaa.com</span></h2>

Object 속성

  • 변수 표현식으로 Scope 속성값을 객체로 제공받아 태그에서 사용하기 위한 Thymeleaf 속성

선택 변수 표현식

  • 선택 변수 표현식을 사용해 객체의 필드값을 제공받아 Thymeleaf 속성값으로 사용

  • 선택 변수 표현식: *{필드명|맵키} 형식으로 표현해 객체의 필드값 또는 맵값을 Thymeleaf 속성값으로 사용

  • Object 속성을 이용해 선택 변수 표현식으로 접근하는 방법은 2가지

<h2>아이디 = <span th:object="${user}" th:text="*{id}">test</span></h2>
<h2>이름 = <span th:object="${user}" th:text="*{name}">테스트</span></h2>
<h2>이메일 = <span th:object="${user}" th:text="*{email}">test@aaa.com</span></h2>
<hr>

<!-- object 속성으로 제공받은 객체는 하위 태그에서 사용 가능 -->
<div th:object="${user}">
	<h2>아이디 = <span th:text="*{id}">test</span></h2>
	<h2>이름 = <span th:text="*{name}">테스트</span></h2>
	<h2>이메일 = <span th:text="*{email}">test@aaa.com</span></h2>
</div>

메세지 표현식

  • 메세지 표현식으로 Properties 파일에 저장된 스프링 메세지를 제공받아 Thymeleaf 속성값으로 사용

  • 메세지 표현식: #{이름} 형식으로 표현하여 이름으로 제공되는 메세지를 Thymeleaf 속성값으로 설정

순서

  • application.properties 파일에 meaages라는 properties 파일을 사용한다고 명시
    #Message
spring.messages.basename=messages
  • messages.properties 파일에 사용할 메세지 정의
    msg.value = Hi
  • html 태그에서 messges.properties 파일에 정의한 이름으로 사용
    <h2 th:text="#{msg.value}">Hello</h2>

src 속성

  • HTML 태그의 src 속성값을 동적으로 변경하기 위한 Thymeleaf 속성

  • src 속성의 속성값으로 링크 표현식을 사용해 속성값 설정

링크 표현식

  • 링크 표현식 @{웹자원경로} 형식으로 표현해 웹자원을 제공받아 Thymeleaf 속성값으로 사용

  • src 속성, href 속성, action 속성 등의 Thymeleaf 속성의 속성값으로 사용

  • 컨텍스트의 최상위 폴더 경로가 자동으로 제공되어 웹자원 요청

<!-- 일반적으로 요청 -->
<img src="/images/Koala.jpg" width="200">
<!-- src 속성과 링크표현식으로 요청 -->
<img th:src="@{/images/Koala.jpg}" width="200">

href 속성

  • href 속성: HTML 태그의 href 속성값을 동적으로 변경하기 위한 속성
<h2><a href="/">메인페이지</a></h2>
<h2><a th:href="@{/}">메인페이지</a></h2>

Thymeleaf 유틸리티 객체

  • Thymeleaf 속성값을 효율적으로 사용하기 위해 다수의 유틸리티 객체 제공

Strings

  • Scope 속성값으로 String 객체를 제공받아 문자열에서 원하는 정보를 Thymeleaf 속성값으로 변환하여 사용하기 위한 유틸리티 객체

  • ThymeleafController.java

    model.addAttribute("phone", "010-1234-5678");

  • result.html

    <h2 th:text="${phone}">전화번호</h2>
<h2 th:text="${#strings.substring(phone, 0, 3)}">앞부분 3자리</h2>
<h2 th:text="${#strings.substring(phone, 4, 8)}">중간부분 4자리</h2>
<h2 th:text="${#strings.substring(phone, 9, 13)}">뒷부분 4자리</h2>

dates

  • dates: Scope 속성값으로 Date 객체를 제공받아 원하는 날짜 및 시간 패턴의 Thymeleaf 속성값으로 변환하여 사용하기 위한 유틸리티 객체

  • ThymeleafController.java

    model.addAttribute("now1", new Date());

  • result.html

    <h2 th:text="${now1}">2024-10-02 12:54:52</h2>	
<h2 th:text="${#dates.format(now1, 'yyyy-MM-dd HH:mm:ss')}">2024-10-02 12:54:52</h2>

temporals

  • temporals: Scope 속성값으로 LocalDateTime 객체를 제공받아 원하는 날짜 및 시간 패턴의 Thymeleaf 속성값으로 변환하기 위한 유틸리티 객체

  • ThymeleafController.java

    //LocalDateTime.now() : 현재 날짜와 시간이 저장된 LocalDateTime 객체를 반환하는 정적메소드
model.addAttribute("now2", LocalDateTime.now());

  • result.html

    <h2 th:text="${now2}">2024-10-02 12:54:52</h2>	
<h2 th:text="${#temporals.format(now2, 'yyyy-MM-dd HH:mm:ss')}">2024-10-02 12:54:52</h2>

numbers

  • numbers: Scope 속성값으로 숫자값을 제공받아 원하는 숫자 패턴의 Thymeleaf 속성값으로 변환하기 위한 유틸리티 객체
  • ThymeleafController.java
    model.addAttribute("price", "100000000");
model.addAttribute("pi", "3.141592");
  • result.html
    <h2 th:text="${price}">100</h2>	
<h2 th:text="${#numbers.formatInteger(price, 3, 'COMMA')}">100</h2>
<hr>
<h2 th:text="${pi}">1.23</h2>	
<h2 th:text="${#numbers.formatDecimal(pi, 1, 2)}">1.23</h2>

Thymeleaf 속성값으로 연산자 사용

<h2 th:text="10 + 2">0</h2>
<h2 th:text="'Hello, ' + ${user.name} + '!!!'">안녕하세요. 테스트님!!!</h2>
<!-- + 연산자를 사용하지 않고 | | 기호를 사용해 문자값과 표현식을 Thymeleaf 속성값으로 사용 -->
<!-- 자바스크립트의 `` 벡틱 이라고 생각하면됨 -->
<h2 th:text="|Hello, ${user.name}!!!|">안녕하세요. 테스트님!!!</h2>

profile
Kang.__.Mingu
최선을 다해 꾸준히 노력하는 개발자 망고입니당 :D
이전 포스트

Spring Boot 01 초기세팅

다음 포스트

Spring Boot 03 주석, 속성, 반복문, 제어문

0개의 댓글