BackEnd/Thymeleaf

[Thymeleaf] 블록

샤아이인 2022. 1. 28.

인프런 김영한님의 Spring강의에서 공부한것을 올리며, Thymeleaf의 경우 unit 단위로 공부후 각각 정리하는 글을 작성하겠습니다.

 

블록

블록은 HTML 태그가 아닌, 타임리프의 유일한 자체 태그이다.

블록은 each 문에서의 불편한점을 보완하는데, 어떤 부분을 보완하는지는 다음 코드를 살펴보자.

 

컨트롤러와 뷰 코드는 다음과 같다.

@GetMapping("/block")
public String block(Model model){
    List<User> list = new ArrayList<>();
    list.add(new User("UserA", 10));
    list.add(new User("UserB", 20));
    list.add(new User("UserC", 30));

    model.addAttribute("users", list);

    return "basic/block";
}
 
<!DOCTYPE html>
<html lang="en">
<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>
</html>
 

실행 결과는 다음과 같다.

<div></div> 2 덩어리가 하나의 블록 단위로, 총 3개의 블록이 생겼다. 각 블럭을 색으로 구분하였다.

원래의 each 문을 사용하면 사용자 이름1, 나이 1 부분만 반복되어 버린다.

요약 부분까지 하나의 블록단위로 만들어 반복시키고 싶다면 블록을 사용하면 된다.

'BackEnd > Thymeleaf' 카테고리의 다른 글

[Thymeleaf] 템플릿 조각  (0) 2022.01.29
[Thymeleaf] 자바스크립트 인라인  (0) 2022.01.28
[Thymeleaf] 주석  (0) 2022.01.28
[Thymeleaf] 조건부 평가  (0) 2022.01.27
[Thymeleaf] 반복  (0) 2022.01.27

댓글