블록

학습 페이지

이번시간에는 타임리프의 블록 태그를 알아보자.

이 <th:block>은 HTML태그가 아닌 타임리프가 제공하는 유일한 태그이다.

타임리프는 보통 속성으로 동작하는데, 이것만으로 해결하기 어려운게 있어서 이런 태그를 제공한다.

    @GetMapping("/block")
    public String block(Model model){
        addUsers(model);
        return "basic/block";
    }

<!DOCTYPE html>
<html xmlns:th="<http://www.thymeleaf.org>">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<th:block th:each="user : ${users}">
    <div>
        사용자 이름1 <span th:text = "${user.username}"></span>
        사용자 나이1 <span th:text = "${user.age}"></span>
    </div>
    <div>
        요약 <span th:text="${user.username} + ' / ' + ${user.age}"></span>
    </div>

</th:block>

</body>
<

Untitled

사실 이것만 봐서는 블록태그가 왜 필요한지는 모르겠다..

블록 태그는 위처럼 두개의 <div>태그를 루프를 돌리고 싶을때 사용한다. 만약 블록태그가 없다면, div태그당 th:each를 해줘야 한다. 이렇게 말고 <th:block th:each = "" >를 사용하면 내부의 모든 div태그를 묶음으로 each를 먹일 수 있다.

참고로 <th:block>은 렌더링시 제거되고 효과만 남는다.

자바스크립트 인라인

학습 페이지

타임리프 내에서 자바스크립트를 사용할 수 있는 인라인 기능을 알아보자. JS에서 타입리프를 편리하게 쓰려면 다음처럼 쓰면 된다.

<script th:inline="javascript">

이렇게 script태그내에 th:inline=”javascript”를 속성으로 주면 추가적인 편리한 기능들을 제공한다고 한다.