📅 공부 기간 : 08. 22(목)
MainController(index.html을 반환)와 DTO는 필수로 존재
일반 객체
HTML
@: 특정 파일이나 요청을 보낼 때<a th:href="@{/}"></a>: root인 html 화면으로 이동<p th:text>✔️</p>: th:text가 포함된 태그 사이에 낀 텍스트는 사라짐(✔️ 위치)
index.html
<!-- 생략 -->
<html lang="ko" xmlns:th="http://thymeleaf.org">
<!-- 생략 -->
<body>
<ul>
<li><a th:href="@{/display/condition}"></a></li>
</ul>
</body>thyme_condition.html
<!-- 1. 객체 출력 -->
<p th:text="${friend}">객체</p> <!-- toString 오버라이드 된 값이 꽂힘-->
<!-- 2. 각각의 데이터로 출력 -->
<!-- DTO에 설정한 멤버변수 -->
<p th:text="${friend.username}">이름</p>
<p th:text="${friend.age}+10">나이</p>
<p th:text="${friend.phone}">전화번호</p>
<p th:text="${friend.birthday}">생년월일</p>
<p th:text="${friend.active}? '외향적' : '내향적'">성향</p>
<!-- 3. Object 단위 데이터로 출력 -->
<!-- th:object를 사용해 한 번에 friend 객체 전체를 바인딩 후 각 속성에 접근 -->
<div th:object="${friend}">
<p th:text="*{username}">이름</p>
<p th:text="*{age}+30">나이</p>
<p th:text="*{phone}">전화번호</p>
<p th:text="*{birthday}">생년월일</p>
<p th:text="*{active}? '외향적' : '내향적'">성향</p>
</div>Controller
@Controller
public class ThymeleafConditionController {
@GetMapping("/display/condition")
public String condition(Model model) {
Friend friend
= new Friend("홍길동", 25, "010-1111-2222", LocalDate.of(2003, 12, 5), true);
model.addAttribute("friend", friend);
return "thyme_condition";
}
}List 데이터
HTML
index.html
<!-- 생략 -->
<html lang="ko" xmlns:th="http://thymeleaf.org">
<!-- 생략 -->
<body>
<ul>
<li><a th:href="@{/display/condition}"></a></li>
</ul>
</body>thyme_condition.html
<!-- List에 들어 있는 데이터 출력 -->
<p>개수 : [[ ${list.size() }]]</p>
<div th:each=" item : ${list}">
<!-- for(String data : list)와 같은 형식 -->
과일 : <span th:text="${item}"></span>
</div>
<!-- 숫자 정보 순회 -->
<div th:each=" n, status : ${nList}">
<!-- th:if : 조건문이 true인 값만 출력 -->
<span th:if="${status.count % 3 == 0}" style="color:red;">[[${status.count}]] : ***** </span> <!-- status : count, index, current 등의 정보가 나옴-->
<!-- th:if : 조건문이 false인 값만 출력 -->
<span th:unless="${status.count % 3 == 0}">------- </span>
</div>Controller
@Controller
public class ThymeleafConditionController {
@GetMapping("/display/condition")
public String condition(Model model) {
List<String> list = Arrays.asList("사과", "배", "딸기", "복숭아", "포도", "오렌지");
List<Integer> nList = new ArrayList<>();
for(int i=1; i<=20; ++i)
nList.add(i*3);
model.addAttribute("list", list);
model.addAttribute("nList", nList);
return "thyme_condition";
}
}Map 데이터
- List와의 차이점 : List -> 순서 존재, Map -> 순서 없음
HTML
index.html
<!-- 생략 -->
<html lang="ko" xmlns:th="http://thymeleaf.org">
<!-- 생략 -->
<body>
<ul>
<li><a th:href="@{/display/condition}"></a></li>
</ul>
</body>thyme_condition.html
<!-- Map에 들어 있는 데이터 출력 -->
<p>개수 : [[ ${map.size() }]]명</p>
<p>10번 데이터 : [[ ${map[10]} ]]</p>
<ul th:each=" f : ${map}"> <!-- 순서 없음 -->
<li>번호 : [[${f.key}]]</li>
<li>이름 : [[${f.value.username}]]</li>
<li>나이 : [[${f.value.age}]]</li>
<li>번호 : [[${f.value.phone}]]</li>
<li>성향 : [[${f.value.active} ? '외향적' : '내향적']]</li>
</ul>Controller
@Controller
public class ThymeleafConditionController {
@GetMapping("/display/condition")
public String condition(Model model) {
Map<Integer, Friend> map = new HashMap<>();
map.put(10, new Friend("손오공", 25, "010", LocalDate.of(2000, 12, 25), true));
map.put(20, new Friend("저팔계", 30, "011", LocalDate.of(1994, 11, 1), false));
map.put(30, new Friend("손오공", 21, "019", LocalDate.of(2003, 1, 5), true));
model.addAttribute("map", map);
return "thyme_condition";
}
}문자 출력
HTML
index.html
<!-- 생략 -->
<html lang="ko" xmlns:th="http://thymeleaf.org">
<!-- 생략 -->
<body>
<ul>
<li><a th:href="@{/display/text}"></a></li>
</ul>
</body>thyme_text.html
<!-- 생략 -->
<html lang="ko" xmlns:th="http://thymeleaf.org">
<!-- 생략 -->
<body>
<p>한글: <span th:text="${korean}">한글</span></p>
<p>영문: <span th:text="${english}">영문</span></p>
<p>태그: <span th:text="${tag}">태그</span></p>
<p>정수: <span th:text="${age}">정수</span></p>
<p>실수: <span th:text="${pi}">실수</span></p>
<p>URL: <span th:text="${url}">URL</span></p>
<p>태그: <span th:utext="${tag}">태그</span></p>
<p>URL: <a th:href="${url}" th:text="${url}">URL</a></p>
<p>한글: [[${korean}]]</p>
<p>영문: [[${english}]] </p>
<p>null: <span th:text="${nullData}">null</span></p>
<p>빈문자: <span th:text="${emptyData}">빈문자</span></p>
</body>Controller
@Controller
public class ThymeleafController {
@GetMapping("/display/text")
public String text(Model model) {
// 문자 출력을 위한 데이터 준비
String korean = "대한민국 ~~ ★";
String english = "Hello, everyone!";
String tag = "<marquee>🪨돌이 굴러가유~</marquee>";
// 숫자 출력을 위한 데이터 준비
int age = 30;
double pi = Math.PI;
// URL 출력을 위한 데이터 준비
String url = "https://naver.com";
// 빈데이터와 NULL 데이터 준비
String nullData = null;
String emptyData = ""; // 참조하고 있으나 값이 없음
model.addAttribute("korean", korean);
model.addAttribute("english", english);
model.addAttribute("tag", tag);
model.addAttribute("age", age);
model.addAttribute("pi", pi);
model.addAttribute("url", url);
model.addAttribute("nullData", nullData);
model.addAttribute("emptyData", emptyData);
return "thyme_text";
}
}숫자
HTML
index.html
<!-- 생략 -->
<html lang="ko" xmlns:th="http://thymeleaf.org">
<!-- 생략 -->
<body>
<ul>
<li><a th:href="@{/display/basicObj}"></a></li>
</ul>
</body>thyme_basicObj.html
<!-- 숫자 -->
<ul>
<li>Integer(기본): <span th:text="${intNum}"></span></li>
<li>Integer(10자리): <span th:text="${#numbers.formatInteger(intNum, 10)}"></span></li>
<!-- 세자리마다 점 찍기 -->
<li>Integer(점): <span th:text="${#numbers.formatInteger(intNum, 3, 'POINT')}"></span></li>
<li>Integer(콤마): <span th:text="${#numbers.formatInteger(intNum, 3, 'COMMA')}"></span></li>
<li>Integer(none): <span th:text="${#numbers.formatInteger(intNum, 3, 'NONE')}"></span></li>
<li>Integer(3자리): <span th:text="${#numbers.formatInteger(intNum, 3)}"></span></li>
<li>-----------------------------</li>
<li>Double(기본): <span th:text="${doubleNum}"></span></li>
<li>Double(소수 2자리): <span th:text="${#numbers.formatDecimal(doubleNum, 3, 2)}"></span></li>
<!-- 가장 많이 쓰는 포맷(세자리마다 콤마, 소수 이하 2자리) -->
<li>Double(천단위 콤마, 소수 2자리): <span th:text="${#numbers.formatDecimal(doubleNum, 3, 'COMMA', 2, 'POINT')}"></span>
<li>Double(천단위 공백, 소수 2자리): <span
th:text="${#numbers.formatDecimal(doubleNum, 3, 'WHITESPACE', 3, 'POINT')}"></span>
</li>
<li>-----------------------------</li>
<li>Percent(기본): <span th:text="${percent}"></span></li>
<!-- 전달인자 무조건 3개 / 0 : 상위 자릿수인데 의미는 없음 -->
<li>Percent(백분율, 2자리): <span th:text="${#numbers.formatPercent(percent, 0, 2)}"></span></li>
<li>-----------------------------</li>
<li>Money: <span th:text="${money}"></span></li>
<li>Money(통화기호): <span th:text="${#numbers.formatCurrency(money)}"></span></li>
</ul>Controller
@Controller
public class ThymeleafObjectController {
@GetMapping("/display/basicObj")
public String basicObj(Model model) {
int intNum = 123456780;
double doubleNum = 1234.56780;
double percent = 0.0325;
double money = 56700;
model.addAttribute("intNum", intNum);
model.addAttribute("doubleNum", doubleNum);
model.addAttribute("percent", percent);
model.addAttribute("money", money);
return "thyme_basicObj";
}
}
인류의 위대한 대화에 참여하기 위해 다양한 언어를 탐구합니다.