[Java/Spring Boot] Thymeleaf

1. Thymeleaf(타임리프)

 

- 타임리프란 서버사이드 템플릿 엔진으로, Spring MVC에서 컨트롤러가 모델에 데이터를 담아 뷰로 보내면, 타임리프가 그 데이터를 HTML에 끼어 넣어서 완성된 페이지를 만듭니다.

-> 기존 jsp와 비슷한 역할인데, Spring Boot에서는 타임리프를 공식 권장합니다. 두 가지의 핵심적인 차이는 jsp는 브라우저에서 직접 여는 게 불가능하지만, 타임리프는 내추럴 템플릿으로 가능합니다.

 

- 타임리프에서는 th:속성을 HTML 태그에 붙이는 방식을 주로 활용합니다. 예를 들면 HomeController에서 메인 인덱스 파일로 매핑해줄 때 모델 객체를 통해 변수를 출력해주면, 쿼리 스트링으로 링크에 p의 값을 지정해주면, 아래 html에서 th:text에 해당값이 들어갑니다.

@GetMapping("/main/index")    // 최상위 디렉터리
public String goIndex(@Nullable @RequestParam("p") String value, Model model ) {
    // index.html에 attrname 이름으로 p String 객체 값을 model 객체에 저장
    model.addAttribute("aname", value ); // ?p=*** -> ?p=attrname
    return "/main/index";  // .html 접미사(suffix)를 자동 추가, index.html에서는 attrname으로 접근
}

-> @GetMapping은 HTTP GET 요청이 /main/index로 들어왔을 때 이 메서드를 실행하라는 의미입니다.

-> String을 반환하는 이유는 Spring MVC에서 문자열 반환은 보통 View 이름을 의미하며, 실제로는 templates/main/index.html을 찾아갑니다. 

* Spring MVC에 관한 자세한 내용은 아래 블로그 글을 통해 알 수 있으며, 이 경우는 아래 글의 두 설명 중 SSR방식에 해당합니다.

[JAVA/Spring Boot] Spring MVC

-> @RequestParam("p"): URL의 파라미터 값을 가져온다는 뜻으로, p에 해당하는 파타미터 값을 value에 넣는 것입니다. 즉, /main/index?p=hello일 경우, value="hello"가 되는 것입니다. 앞에 붙은 @Nullable은 말 그대로 null을 허용한다는 것으로 /main/index처럼 p가 없어도 에러가 발생하지 않습니다.(이 어노테이션이 없으면 p가 없는 URL로 접속 시 에러가 발생합니다.)

@RequestParam(value="p", required=false) // 이 방식도 많이 사용됨(p 없어도 에러 발생하지 않음)

-> Controller에서 View(html)로 데이터를 전달할 때 사용하는 객체인 Model model을 통해 .addAttribute를 작성해주면, html에서 aname을 ${aname}으로 사용이 가능하며, 이 값은 위에서 지정한 것처럼 value 값입니다.

<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" th:href="@{/}">
    <div class="sidebar-brand-icon rotate-n-15">
        <i class="fas fa-laugh-wink"></i>
    </div>
    <div class="sidebar-brand-text mx-3"><span th:text="${aname}"></span><sup>2</sup></div>
</a>

-> th:는 위에서 설명한대로 Thymeleaf 전용 속성으로, th:text, th:href, th:if, th:each 등은 서버가 html 렌더링 전에 처리합니다. th:href를 통해 링크 주소를 동적으로 생성합니다.

-> Model에 저장된 데이터에 접근을 할 때는 @{해당값의이름}의 형식으로 사용해줍니다.

 

Q. 왜 그냥 href를 사용하지 않고 th:href를 사용하나요?

A. 먼저, 아래 예시처럼 Context Path를 자동으로 처리합니다. 그리고 URL 변수를 사용할 수 있는 점이 유용합니다.

<a class="collapse-item" href="../products/utilities-color">Colors</a>
<a class="collapse-item" th:href="@{/products/utilities-color}">Colors</a>