도담도담

thymeleaf 내용정리 본문

IT 공부/KH 정보교육원

thymeleaf 내용정리

Zinisang 2021. 7. 8. 20:21

스프링 MVC 와 thymeleaf

스프링 부트에서는 별도의 설정을 통해 JSP등을 사용할 수 있지만,
스프링 부트의 원래 목적보다 빠르고 편리하게 개발하는 것을 지향하기 때문에
JSP보다는 쉽고 간결하게 UI를 해결할 수 있는 Template 플러그인을 사용하여 개발


기본적으로 FreeMarker, Mustache 등을 이용하여 개발


그 중에서 thymeleaf을 사용하는 이유

  1. JSP와 유사하게 ${ }을 별도 설정 없이 바로 사용 가능
  2. Model 에 담긴 객체를 JavaScript에서도 쉽게 처리 가능
  3. 연산, 포맷과 관련된 기능에 대한 추가 개발없이 사용할 수 있도록 지원
  4. 개발도구(즉, ~~.html) 파일로 생성하는데 문제가 없고, 해당 파일 호출시 확장자를 이용하지 않고 호출 가능

기존 JSP에서는

<%@ page ~~~ %>
<%@ tablib ~~~ %>
와 같이 내부에서 전달 된 객체를 사용하기 위해 여러가지 설정을 주어야 하지만,

thymeleaf는

<html xmlns:th=~~~> 이 부분만 미리 설정하면 된다.

thymeleaf 프로젝트 생성 시 주의 사항

IntelliJ는 Spring Boot 버전이 기본값으로 최신 버전이 설정되어 있기 때문에,

thymeleaf 를 완벽하게 지원할 수 있는 버전으로 변경하여 생성하는것을 추천!!


thymeleaf 를 이용하는 프로젝트는

내부 코드 변경 후에 만들어진 결과를 서버내에 보관(캐싱)하는 것이 기본값으로 설정되어있다.

보관하지 않도록 설정 하려면, application.properties 파일 내에 별도의 설정을 해주어야 한다.
( spring.thymeleaf.cache=false 추가 ) 

 

thymeleaf 의 숫자, 날짜 관련 포맷 변경을 위해,

build.gradle 수정 내용

    testImplementation('org.springframework.boot:spring-boot-starter-test') {
        exclude group: 'org.junit.vintage', module: 'junit-vintage-engine'
    }
    compile group: 'org.thymeleaf.extras', name: 'thymeleaf-extras-java8time'

 

Spring Boot 와 UI (thymeleaf) 작업을 위한 기본 구조 설정

2 1 3
Controller ====>  DTO ====>  thymeleaf ~~.html

1. DTO

@Data ( getter/setter, toString(), equals(), hashCode() 등을 자동 생성 )
	
@Builder(toBuilder = true) : 생성자를 자동생성해서 해당 데이터들을 set 할수 있게만듬
	클래스.builder().멤버변수().멤버변수().build();
	클래스.builder().멤버변수().build();

2. Controller

@Controller					:해당 클래스를 컨트롤러로 자동등록
@RequestMapping("/sample")			:요청 UTL
@Log4j2						:컨트롤러 동작여부 확인
public class SampleController {

    @GetMapping("/ex1")				:세부 요청 URL
    public void ex1(){
        log.info("ex1~~~");
    }   
}

웹브라우저: http://localhost:9999/sample/ex1
http://localhost:9999/  <== 애플리케이션
http://localhost:9999/sample  <== 요청 컨트롤러
http://localhost:9999/sample/ex1  <== 요청 메서드

 

3. thymeleaf ~~.html

파일명은 세부요청 URL 과 동일

  • 컨트롤러의 해당메서드가 일을 처리한 후, 요청 URL에 해당하는 ~~.html 파일을 호출.
    전달되는 값이 있을 경우 자동으로 대상 파일에게 전달 된다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <h1 th:text="${'Hello Thymeleaf'}"></h1>
</body>
</html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">
IntelliJ Ultimate는 Thymeleaf 관련 플러그인이 기본적으로 설치가 되어있다.
따라서 별도의 설정이 필요없지만, 해당 html 내부에서 코딩 작업 시,
조금이라도 편리하게 개발하기 위해 설정!

 

Thymeleaf 의 기본 사용법

html 태그 내에서
th: 를 붙여주고 Thymeleaf 가 제공하는 각종 속성을 이용하여 값을 설정

Thymeleaf 의 반복문 처리

th:each 속성을 이용

사용형식
	<시작태그 th:each = "저장변수:${전달받은 목록}"></닫는태그>

반복문을 이용하여 데이터 출력
<시작태그 th:each = "저장변수:${전달받은 목록}">
	[[${저장변수}]]
</닫는태그>


Controller가 전달하는 형식
	model.addAttribute("list", list);
	

HTML 에서는 "list"가 보유하고 있는 데이터를 추출하여 출력
    <li th:each="dto : ${list}">
        [[${dto}]]
    </li>

state는 내부에 index 와 count 를 가지고 있는데,
index는 추출되는 객체의 위치 즉, List 내의 index 번호를 저장받고,
count는 추출되는 객체의 순서 즉, 첫번째인지, 두번째인지를 저장받기 때문에..
         state.index : 0~~
         state.index : 1~~
와 같이 출력된다.

Thymeleaf 의 제어문 처리 (삼항연산자 스타일로 처리)

th:if="조건" 해야할 일

예) sno 의 값이 5의 배수(나머지연산자 => %)에 해당하는 객체들만 출력

<li th:each="dto,state:${list}" th:if="${dto.sno%5==0}">
	[[${dto}]]
</li>

그렇지 않다면
th:unless

예) sno의 값을 5로 나눈 나머지가 0이면 sno만 출력하고 그렇지 않다면 dto.first 를 출력

<li th:each = "dto,state:${list}">
	<span th:if = "${dto.sno%5==0}" th:text="${"----"+dto.sno}"></span>
	<span th:unless = "${dto.sno%5==0}" th:text="${dto.first}"></span>
</li>

 

그외 적용방법

th:text 를 이용

     th:text="${조건}?할일(true)"
     th:text="${조건}?할일(true):할일(false)"

<li th:each = "dto,state:${list}" th:text="${dto.sno%5==0}?${dto.sno}">
</li>

<li th:each = "dto,state:${list}" th:text="${dto.sno%5==0}?${dto.sno}:${dto.first}">
</li>

 

스타일 적용
th:class 를 이용

 

예) 5의 배수에해당하는 객체들에게만 스타일을 적용하여 출력

<li th:each = "dto,state:${list}" th:class="${dto.sno%5==0}?'target'" th:text="{$dto}">
</li>

 

링크적용

th:href 를 이용

1. 단순하게 링크만 사용할 경우

<a th:href="@{주소}">출력내용</a>

 

2. 파라미터 추가

<a th:href="@{주소(파라미터명=값}">출력내용</a>

'IT 공부 > KH 정보교육원' 카테고리의 다른 글

쿼리메서드  (0) 2021.07.10
Thymeleaf 레이아웃  (0) 2021.07.09
Spring Data JPA 개념  (0) 2021.07.07
프레임워크 구분  (0) 2021.07.02
Lombok 라이브러리의 기본 어노테이션 요약  (0) 2021.07.02
'IT 공부/KH 정보교육원' Related Articles more
Comments