웹 화면을 만들다 보면 데이터를 반복 출력하거나 조건부로 보여줘야 할 때가 많다. 보통은 <div>나 <span> 같은 HTML 태그에 타임리프 속성을 붙여 처리한다. 하지만 어떤 경우에는 굳이 의미 없는 태그를 추가해야 하는 상황이 생긴다

.

오늘은 이런 상황을 해결하기 위해 타임리프에서 제공하는 유일한 자체 태그 <th:block>에 대해 알아본다. <th:block>은 화면에는 출력되지 않지만, 반복문이나 조건문을 묶는 용도로 활용할 수 있어 매우 유용하다.

 

1. 컨트롤러에서 데이터 준비하기

예제를 위해 컨트롤러에서 사용자 리스트를 모델에 담아 뷰로 넘긴다.

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

private void addUsers(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);
}

 

 

2. 뷰 템플릿에서 <th:block> 사용하기

<th:block>은 실제 HTML 태그가 아니므로 화면에 남지 않는다. 대신 내부 태그를 반복하거나 조건에 따라 출력할 때 사용한다.

<!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>
</html>

 

3. 실행 결과

렌더링 결과에서는 <th:block> 자체는 사라지고, 내부의 태그만 반복된다.

 

 

4. 언제 쓰면 좋을까?

타임리프의 대부분 기능은 HTML 속성(th:*) 형태로 적용한다. 그런데 상황에 따라 특정 태그에 기능을 넣기 애매한 경우가 있다.

 

예를 들어 반복문 안에서 여러 줄의 <div>나 <span>을 동시에 반복 처리해야 할 때, 굳이 불필요한 부모 태그를 추가할 필요가 없다.

이럴 때 <th:block>을 사용하면 HTML 구조를 해치지 않으면서도 반복과 조건 처리를 깔끔하게 구현할 수 있다.

 

 

마무리하며

이번 글에서는 타임리프의 <th:block> 태그를 살펴보았다. <th:block>은 렌더링 시 제거되기 때문에 화면에는 남지 않으면서도 반복과 조건문을 묶어서 처리할 수 있도록 도와준다.

 

즉, 불필요한 HTML 태그를 만들지 않아도 되고, 코드 가독성이 훨씬 좋아진다. 타임리프는 이런 세세한 기능을 제공함으로써 개발자가 실제 화면 구현에 집중할 수 있도록 지원한다.

 

이는실제로 권장되지 않지만 꼭 사용해야 할때 사용하면 좋다.

 

 

감사합니다.

 

'타임리프' 카테고리의 다른 글

[Thymeleaf] 템플릿 조각  (0) 2025.09.16
[Thymeleaf] 자바스크립트 인라인  (0) 2025.09.16
[Thymeleaf] 주석  (0) 2025.09.16
[Thymeleaf] 조건부 평가 (if, unless, switch)  (0) 2025.09.16
[Thymeleaf] 반복  (0) 2025.09.16

티스토리툴바