728x90
Spring Boot를 사용하여 웹 애플리케이션을 개발할 때, Thymeleaf를 템플릿 엔진으로 활용하는 경우가 많습니다. 특히 Map 형태의 데이터를 Thymeleaf에서 표시하는 방법을 이해하면 다양한 형태의 데이터를 유연하게 다룰 수 있습니다. 이번 글에서는 Map을 활용하여 데이터를 화면에 출력하는 여러 가지 방법을 살펴보겠습니다.
1. 기본 Map 데이터 활용하기
가장 기본적인 형태의 Map을 Thymeleaf에서 사용하는 방법을 살펴보겠습니다.
Controller 코드
@Controller
@RequestMapping("/map")
public class MapController {
@GetMapping("/basic")
public String basicMap(Model model) {
Map<String, String> basicMap = new HashMap<>();
basicMap.put("name", "홍길동");
basicMap.put("age", "30");
basicMap.put("city", "서울");
model.addAttribute("basicMap", basicMap);
return "map/basic";
}
}Thymeleaf Template (map/basic.html)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>기본 Map 데이터 표시</title>
</head>
<body>
<h2>기본 Map 데이터</h2>
<p>이름: <span th:text="${basicMap.name}"></span></p>
<p>나이: <span th:text="${basicMap.age}"></span></p>
<p>도시: <span th:text="${basicMap.city}"></span></p>
</body>
</html>
설명:
- th:text="${basicMap.name}" : basicMap에 저장된 name 값을 출력합니다.
- th:text="${basicMap.age}", th:text="${basicMap.city}" 도 같은 방식으로 값을 가져옵니다.
2. List<Map<String, String>> 형태의 데이터 활용
List<Map<String, String>> 형식의 데이터를 Thymeleaf에서 반복문을 사용하여 표시할 수도 있습니다.
Controller 코드
@GetMapping("/list")
public String listMap(Model model) {
List<Map<String, String>> userList = new ArrayList<>();
Map<String, String> user1 = new HashMap<>();
user1.put("name", "김철수");
user1.put("age", "25");
user1.put("city", "부산");
Map<String, String> user2 = new HashMap<>();
user2.put("name", "이영희");
user2.put("age", "28");
user2.put("city", "대전");
userList.add(user1);
userList.add(user2);
model.addAttribute("userList", userList);
return "map/list";
}
Thymeleaf Template (map/list.html)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>List<Map<String, String>> 데이터 표시</title>
</head>
<body>
<h2>사용자 리스트</h2>
<table border="1">
<tr>
<th>이름</th>
<th>나이</th>
<th>도시</th>
</tr>
<tr th:each="user : ${userList}">
<td th:text="${user.name}"></td>
<td th:text="${user.age}"></td>
<td th:text="${user.city}"></td>
</tr>
</table>
</body>
</html>
설명:
- th:each="user : ${userList}" : userList를 반복하며 각 Map을 user 변수에 저장합니다.
- th:text="${user.name}" 등을 사용하여 각 Map의 값을 출력합니다.
3. Map<String, Map<String, String>> 형태 활용
Map 안에 또 다른 Map이 있는 경우, Thymeleaf에서 접근하는 방법을 알아보겠습니다.
Controller 코드
@GetMapping("/nested")
public String nestedMap(Model model) {
Map<String, Map<String, String>> nestedMap = new HashMap<>();
Map<String, String> person1 = new HashMap<>();
person1.put("age", "40");
person1.put("city", "서울");
Map<String, String> person2 = new HashMap<>();
person2.put("age", "35");
person2.put("city", "대구");
nestedMap.put("홍길동", person1);
nestedMap.put("김철수", person2);
model.addAttribute("nestedMap", nestedMap);
return "map/nested";
}
Thymeleaf Template (map/nested.html)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Map 안의 Map 데이터 표시</title>
</head>
<body>
<h2>사용자 정보</h2>
<table border="1">
<tr>
<th>이름</th>
<th>나이</th>
<th>도시</th>
</tr>
<tr th:each="entry : ${nestedMap}">
<td th:text="${entry.key}"></td>
<td th:text="${entry.value.age}"></td>
<td th:text="${entry.value.city}"></td>
</tr>
</table>
</body>
</html>
설명:
- th:each="entry : ${nestedMap}" : nestedMap의 key-value 쌍을 entry 변수에 저장합니다.
- entry.key는 Map의 키(사용자 이름)를 나타냅니다.
- entry.value.age, entry.value.city는 내부 Map의 데이터를 가져오는 방식입니다.
Thymeleaf에서는 Map 데이터를 다음과 같이 다양한 방식으로 활용할 수 있습니다.
- 기본 Map 활용 → basicMap.name 방식으로 접근
- List<Map> 활용 → th:each 반복문을 사용하여 출력
- Map<String, Map> 활용 → entry.key, entry.value.property 형태로 접근
LIST
'Develop' 카테고리의 다른 글
| JavaScript와 jQuery로 Input 태그에서 공백 입력 방지하기 (1) | 2025.02.25 |
|---|---|
| 로그 파일에서 특정 문자열 찾기 cat, more 및 기타 명령어 활용법 (1) | 2025.02.24 |
| [Javascript] html javascript 로 엑셀 다운로드 구현. 총정리 (1) | 2025.02.21 |
| [JavaScript] ajax post 요청 form 내용 json 으로 전송 (0) | 2025.02.21 |
| Spring Framework의 Scheduled 스케줄 동적으로 실행 방법 (4) | 2025.02.17 |