Spring Boot | Thymeleaf 엔진 사용

Tags:

Thymeleaf 이란?

  • “타임 리프"라고 읽는다.
  • 텍스트, HTML, XML, Javascript, CSS 그리고 텍스트를 생성할 수 있는 템플릿 엔진이다.
  • 순수 HTML로 템플릿을 작성할 수 있다.
  • Spring Boot에서 사용이 권장되고 있다. (Spring Boot에서는 JSP를 추천하지 않는다.)

http://www.thymeleaf.org/documentation.html

Hello World

의존관계 추가

Thymeleaf을 사용할 수 있도록 의존관계을 추가한다.
build.gradle

dependencies {
    compile 'org.springframework.boot:spring-boot-starter-web'
+   compile 'org.springframework.boot:spring-boot-starter-thymeleaf'
    compile 'org.webjars:jquery-ui:1.11.4'
}

컨트롤러의 구현

  • 템플릿을 반환하는 경우 클래스에 @RestController 대신에 @Controller 어노테이션을 부여한다.
  • 메소드의 반환 값으로 표시하는 템플릿의 경로를 지정한다.
    • 템플릿 파일은 클래스 경로에 templates 패키지 아래에 위치한다.
    • 컨트롤러 메소드가 리턴 한 문자열이 templates 패키지에서 상대 경로가 된다 (확장자는 생략 가능).

src/main/java/sample/springboot/web/HelloController.java

package sample.springboot.web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
@RequestMapping("/hello")
public class HelloController {

    @RequestMapping(method=RequestMethod.GET)
    public String hello() {
        return "hello";
    }
}

src/main/resources/templates/hello.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello Thymeleaf</title>
  </head>
  <body>
    <h1>Hello Thymeleaf</h1>
  </body>
</html>

실행 결과

브라우저로 http://localhost:8080/hello 에 접속한다.

화면에 값을 포함

모델 구현

src/main/java/sample/springboot/web/Hoge.java

package sample.springboot.web;

public class Hoge {

    public int id;
    public String value;

    @Override
    public String toString() {
        return "Hoge [id=" + id + ", value=" + value + "]";
    }
}

컨트롤러의 구현

src/main/java/sample/springboot/web/HelloController.java

package sample.springboot.web;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
@RequestMapping("/hello")
public class HelloController {

    @RequestMapping(method=RequestMethod.GET)
    public String hello(Model model) {
        Hoge hoge = new Hoge();
        hoge.id = 10;
        hoge.value = "hoge";

        model.addAttribute("myData", hoge);

        return "hello";
    }
}
  • 컨트롤러 메소드에서 Model을 인수받을 수 있도록 한다.
  • 이 Model의 addAttribute() 메소드를 사용하여 화면에 출력하고 싶은 정보를 설정한다.

화면 구현

src/main/resources/templates/hello.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <title>Hello Thymeleaf</title>
  </head>
  <body>
    <dl>
      <dt>id</dt>
      <dd th:text="${myData.id}"></dd>

      <dt>value</dt>
      <dd th:text="${myData.value}"></dd>
    </dl>
  </body>
</html>
  • 화면 측에서 먼저 Thymeleaf에 대한 네임 스페이스를 정의 (xmlns : th)
    • th : text 속성에 지정된 값을 텍스트로 출력한다.
    • th : text의 값은 $ {…}와 같이 EL 표현식스러워 출력 값을 지정한다.

실행 결과

브라우저로 http://localhost:8080/hello 에 접속한다.

반복 출력

컨트롤러의 구현

src/main/java/sample/springboot/web/HelloController.java

package sample.springboot.web;

import java.util.Arrays;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
@RequestMapping("/hello")
public class HelloController {

    @RequestMapping(method=RequestMethod.GET)
    public String hello(Model model) {
        List<Hoge> list = Arrays.asList(
                            new Hoge() {{
                                id = 10;
                                value = "hoge";
                            }},
                            new Hoge() {{
                                id = 20;
                                value = "fuga";
                            }},
                            new Hoge() {{
                                id = 30;
                                value = "piyo";
                            }});

        model.addAttribute("hogeList", list);

        return "hello";
    }
}

화면 구현

src/main/resources/templates/hello.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <title>Hello Thymeleaf</title>
  </head>
  <body>
    <dl th:each="hoge : ${hogeList}">
      <dt>id</dt>
      <dd th:text="${hoge.id}"></dd>

      <dt>value</dt>
      <dd th:text="${hoge.value}"></dd>
    </dl>
  </body>
</html>

th:each으로 지정된 컬렉션을 반복할 수 있다.




최종 수정 : 2017-12-17