템플릿 조각

웹 페이지를 개발할 때는 공통 영역이 많이 있습니다.

예를 들어서 상단 영역이나 하단 영역, 좌측 카테고리 등등 여러 페이지에서 함께 사용하는 영역들이 있습니다. 그래서 HTML 자체를 영역별로 재활용할 때가 굉장히 많습니다. (마치 메서드를 분리해서 재활용 하듯이)

예를 들어, 페이지가 10개인데 하단에 있는 카피라이트가 똑같다면 그것을 조각으로 만들어놓고 다른 페이지에서 사용하는 것입니다.

이런 부분을 코드를 복사해서 사용한다면 변경시 여러 페이지를 다 수정해야 하므로 상당히 비효율 적입니다.

타임리프는 이런 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원합니다.

<aside> ❗ 주의! 템플릿 조각과 레이아웃 부분은 직접 실행해보아야 이해된다.

</aside>

TemplateController

package hello.thymeleaf.basic;

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

@Controller
@RequestMapping("/template")
public class TemplateController {

    @GetMapping("/fragment")
    public String template() {
        return "/template/fragment/fragmentMain";
    }
}

/resources/templates/template/fragment/footer.html

<!DOCTYPE html>
<html xmlns:th="<http://www.thymeleaf.org>">
<body>

<footer th:fragment="copy">
    푸터 자리 입니다.
</footer>
<footer th:fragment="copyParam (param1, param2)">
    <p>파라미터 자리 입니다.</p>
    <p th:text="${param1}"></p>
    <p th:text="${param2}"></p>
</footer>

</body>
</html>

어떤 HTML을 만드는데 여러 페이지에서 똑같은 하단영역을 쓸 것입니다.

그래서 footer.html가 코드 조각 역할을 할 것입니다. 직접적으로 불리지는 않고, 다른 타임리프 파일들이 불러다 쓰는 파일입니다.

footer 태그를 써서 만들었고 여러개의 조각을 놔둘 수도 있습니다. 그리고 th:fragment="XXX” 처럼 이름을 줄 수 있습니다. 마치 메서드에 이름을 주듯이 이름을 설정하면 다른 곳에서 이 이름을 긁어서 사용할 수 있는 것입니다.

그래서 th:fragment 가 있는 태그는 다른곳에 포함되는 코드 조각으로 이해하면 됩니다.