Thymeleaf는 서버사이드 템플릿 엔진으로, Spring Framework와 함께 많이 사용됩니다. Thymeleaf를 사용하면 서버에서 데이터를 받아 HTML 페이지를 동적으로 구성할 수 있습니다. 그 중에서 특정 조건에 따라 HTML의 일부를 다르게 보여줘야 하는 경우 switch-case 문법을 사용하여 간단하게 처리할 수 있습니다.
이번 포스트에서는 Thymeleaf에서 switch-case 문법을 사용하는 방법을 예제를 통해 설명해 보겠습니다.
1. switch-case 문법이란?
switch-case는 여러 조건에 따라 다르게 처리할 때 사용하는 제어문입니다. 특정 값을 기준으로 각기 다른 처리를 할 수 있으며, Thymeleaf에서는 th:switch와 th:case 속성을 통해 이를 구현할 수 있습니다. 기본적으로 Java나 다른 언어의 switch-case와 유사한 구조를 따릅니다.
Thymeleaf의 switch-case 기본 구조
<div th:switch="${expression}">
<p th:case="'value1'">Value 1일 때 출력할 내용</p>
<p th:case="'value2'">Value 2일 때 출력할 내용</p>
<p th:case="*">기본으로 출력할 내용</p> <!-- default 역할 -->
</div>설명:
- th:switch: 평가할 변수를 지정합니다.
- th:case: 각 조건에 해당하는 값을 설정하고, 해당 조건일 때 출력할 내용을 작성합니다.
- th:case="*": 다른 모든 경우에 적용되는 기본 값으로, Java의 default 역할을 합니다.
2. th:switch와 th:case 사용 예제
이제 간단한 예제를 통해 switch-case 문법을 실제로 어떻게 사용하는지 살펴보겠습니다. 예제에서는 사용자의 권한(role)에 따라 다른 메시지를 출력하는 HTML 페이지를 만들어보겠습니다.
예제: 사용자 권한에 따른 메시지 출력
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf Switch-Case 예제</title>
</head>
<body>
<div th:switch="${userRole}">
<p th:case="'ADMIN'">관리자 권한이 있습니다.</p>
<p th:case="'USER'">일반 사용자 권한이 있습니다.</p>
<p th:case="'GUEST'">게스트 권한이 있습니다.</p>
<p th:case="*">권한이 없습니다.</p> <!-- default case -->
</div>
</body>
</html>설명:
- ${userRole}: 서버에서 전달받은 userRole 변수를 기준으로 각기 다른 메시지를 출력합니다.
- th:case="'ADMIN'": 사용자의 권한이 'ADMIN'일 때 출력할 메시지.
- th:case="*": 사용자의 권한이 위의 조건에 모두 해당하지 않을 때, 기본으로 출력할 메시지.
예제의 컨트롤러 코드
Spring MVC에서 위의 예제를 사용하는 경우, 다음과 같이 userRole 값을 전달하는 컨트롤러를 작성할 수 있습니다.
@Controller
public class UserController {
@GetMapping("/role")
public String getUserRole(Model model) {
// 예시로 ADMIN 역할을 전달
String userRole = "ADMIN";
model.addAttribute("userRole", userRole);
return "role";
}
}
위 코드에서 userRole이 ADMIN이므로, HTML에서는 관리자 권한이 있습니다라는 메시지가 출력됩니다.
3. switch-case를 활용한 동적 UI 구성
Thymeleaf의 switch-case는 복잡한 UI 로직을 간결하게 표현할 때 유용합니다. 사용자의 상태, 역할 또는 조건에 따라 UI 요소를 다르게 보여줘야 할 때 th:switch와 th:case를 사용하면 템플릿을 보다 읽기 쉽게 만들 수 있습니다.
예제: 제품 상태에 따른 버튼 표시
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>제품 상태에 따른 버튼 표시</title>
</head>
<body>
<div th:switch="${product.status}">
<button th:case="'AVAILABLE'" class="btn btn-primary">구매하기</button>
<button th:case="'OUT_OF_STOCK'" class="btn btn-secondary" disabled>품절</button>
<button th:case="'COMING_SOON'" class="btn btn-info">출시 예정</button>
<button th:case="*">상태 알 수 없음</button>
</div>
</body>
</html>설명:
- ${product.status}: 서버에서 전달받은 product.status 값을 기준으로 버튼을 동적으로 렌더링합니다.
- 제품 상태에 따라: 제품이 구매 가능(AVAILABLE)할 때는 "구매하기" 버튼을, 품절(OUT_OF_STOCK)일 때는 "품절" 버튼을, 출시 예정(COMING_SOON)일 때는 "출시 예정" 버튼을 보여줍니다.
- 기본 상태: 제품의 상태가 알 수 없을 때는 "상태 알 수 없음"이라는 메시지를 표시합니다.
컨트롤러 코드
@Controller
public class ProductController {
@GetMapping("/product")
public String getProduct(Model model) {
// 예시로 제품 상태를 AVAILABLE로 설정
Product product = new Product();
product.setStatus("AVAILABLE");
model.addAttribute("product", product);
return "product";
}
}4. th:switch와 if-else 비교
Thymeleaf에서 조건문을 처리하는 방법으로는 switch-case뿐만 아니라 th:if, th:unless를 사용하는 방법도 있습니다. 그러나 여러 조건을 처리해야 할 경우, if-else보다 switch-case를 사용하는 것이 가독성 측면에서 더 유리할 수 있습니다.
예시: if-else로 처리한 경우
<p th:if="${userRole == 'ADMIN'}">관리자 권한이 있습니다.</p>
<p th:if="${userRole == 'USER'}">일반 사용자 권한이 있습니다.</p>
<p th:if="${userRole == 'GUEST'}">게스트 권한이 있습니다.</p>
<p th:if="${userRole != 'ADMIN' and userRole != 'USER' and userRole != 'GUEST'}">권한이 없습니다.</p>설명:
- 여러 개의 th:if를 사용하면 코드를 관리하기가 복잡해질 수 있습니다. 반면, switch-case는 여러 조건을 한 곳에 묶어 가독성을 높여줍니다.
'Develop' 카테고리의 다른 글
| [JavaScript] Date() 함수 설명과 사용방법 예제 (6) | 2024.10.24 |
|---|---|
| [jQuery] event preventDefault 설명과 사용방법 예제 (5) | 2024.10.23 |
| [PostgreSQL] 숫자를 금액단위 3자리마다 콤마로 변환하는 방법 (8) | 2024.10.22 |
| JavaScript와 jQuery를 사용해서 disabled 활성화, 비활성화 방법 (5) | 2024.10.22 |
| [JavaScript] Cookie 쿠키를 저장하고 불러오는 방법 (7) | 2024.10.22 |