Thymeleaf (ํ์๋ฆฌํ)
ํ์๋ฆฌํ๋ ์๋ฒ ์ฌ์ด๋ Java ํ
ํ๋ฆฟ ์์ง์
๋๋ค. HTML, XML, JavaScript, CSS ๋ฑ์ ๋งํฌ์
์ธ์ด๋ฅผ ์ฌ์ฉํ์ฌ ๋์ ์น ํ์ด์ง๋ฅผ ์์ฑํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ํ์๋ฆฌํ๋ ๊ฐ๋จํ๊ณ ์ง๊ด์ ์ธ ๊ตฌ๋ฌธ์ ์ ๊ณตํ๋ฉฐ, Spring Framework์์ ํตํฉ์ด ์ฉ์ดํฉ๋๋ค.
Spring Framework ์์์ ํ
ํ๋ฆฟ ์์ง์ผ๋ก ์ฌ์ฉํ๋ JSP ๋ฐ JSP ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊ธฐ๋ฅ๋ค์ ๋ชจ๋ ๋์ฒดํ ์ ์๋ ํ
ํ๋ฆฟ ์์ง์ด๋ค.
ํ ํ๋ฆฟ ์์ง์ด๋?
ํ
ํ๋ฆฟ ์์ง์ ๋์ ์น ํ์ด์ง๋ฅผ ์์ฑํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ ๋๊ตฌ์
๋๋ค. ํ
ํ๋ฆฟ ์์ง์ ๋ฏธ๋ฆฌ ์ ์๋ ํ
ํ๋ฆฟ๊ณผ ๋ฐ์ดํฐ๋ฅผ ๊ฒฐํฉํ์ฌ ์ต์ข
์ ์ผ๋ก ์น ํ์ด์ง๋ฅผ ์์ฑํฉ๋๋ค. ์ด๋ฅผ ํตํด ๊ฐ๋ฐ์๋ ๋์ผํ ํ
ํ๋ฆฟ์ ์ฌ์ฉํ์ฌ ๋ค์ํ ๋ฐ์ดํฐ๋ฅผ ๋์ ์ผ๋ก ์ถ๋ ฅํ ์ ์์ต๋๋ค. ํ
ํ๋ฆฟ ์์ง์ ์ฃผ๋ก ์๋ฒ ์ฌ์ด๋์์ ์คํ๋๋ฉฐ, ํด๋ผ์ด์ธํธ์๊ฒ ์์ฑ๋ HTML์ ์ ๊ณตํฉ๋๋ค.
ํ์๋ฆฌํ ์ฃผ์ ๊ธฐ๋ฅ
โข
๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ: ํ์๋ฆฌํ๋ ์๋ฒ ์ฌ์ด๋์์ ๋ฐ์ดํฐ๋ฅผ ํ
ํ๋ฆฟ์ ๋ฐ์ธ๋ฉํ์ฌ ๋์ ์ผ๋ก ์น ํ์ด์ง๋ฅผ ์์ฑํ ์ ์์ต๋๋ค.
โข
์กฐ๊ฑด๋ฌธ๊ณผ ๋ฐ๋ณต๋ฌธ: ํ์๋ฆฌํ๋ if๋ฌธ๊ณผ ๋ฐ๋ณต๋ฌธ์ ์ฌ์ฉํ์ฌ ํ
ํ๋ฆฟ์์ ๋ณต์กํ ๋ก์ง์ ๊ตฌํํ ์ ์์ต๋๋ค.
โข
๊ตญ์ ํ ์ง์: ํ์๋ฆฌํ๋ ๋ค๊ตญ์ด ์ง์์ ์ํ ๊ตญ์ ํ ๊ธฐ๋ฅ์ ์ ๊ณตํ์ฌ ๋ค์ํ ์ธ์ด๋ก ์น ํ์ด์ง๋ฅผ ํ์ํ ์ ์์ต๋๋ค.
ํ์๋ฆฌํ ๋ฌธ๋ฒ
โข
ํ์๋ฆฌํ ๋ธ๋ก
โฆ
th:block
โข
ํ์๋ฆฌํ ์ถ๋ ฅ
โฆ
th:text
โฆ
th:html
โฆ
th:href
โข
ํ์๋ฆฌํ ์ ์ด๋ฌธ
โฆ
์กฐ๊ฑด๋ฌธ
โช
th:if
โช
th:switch
โฆ
๋ฐ๋ณต๋ฌธ
โช
th:each
โข
th:object
โข
form
โข
th:with
โข
ํ์๋ฆฌํ ์ธ์
์ ๋ณด ๊ฐ์ ธ์ค๊ธฐ
โข
ํ์๋ฆฌํ ์๋ฐ ๋ฉ์๋ ํธ์ถ
ํ์๋ฆฌํ ๋ธ๋ก
ํ์๋ฆฌํ <th:block>
ํ์๋ฆฌํ th:block์ ํ์๋ฆฌํ์ ๋ธ๋ก ํ๊ทธ๋ก, HTML ์์๋ฅผ ๊ทธ๋ฃนํํ๊ณ ์กฐ๊ฑด๋ฌธ, ๋ฐ๋ณต๋ฌธ ๋ฑ์ ์ ์ฉํ๊ธฐ ์ํด ์ฌ์ฉ๋ฉ๋๋ค. th:block ํ๊ทธ ๋ด๋ถ์ ์์๋ค์ ๋
๋ฆฝ์ ์ธ ๋ธ๋ก์ผ๋ก ์ฒ๋ฆฌ๋๋ฉฐ, ํ์๋ฆฌํ ํํ์๊ณผ ํจ๊ป ์ฌ์ฉํ์ฌ ๋์ ์ธ ์น ํ์ด์ง๋ฅผ ๊ตฌ์ฑํ ์ ์์ต๋๋ค.
<th:block> ... </th:block>
HTML
๋ณต์ฌ
ํ์๋ฆฌํ ์ถ๋ ฅ
ํ์๋ฆฌํ th:text
ํ์๋ฆฌํ th:text๋ ํ๊ทธ ๋ด๋ถ์ ํ
์คํธ๋ฅผ ๋์ ์ผ๋ก ์ค์ ํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ์ด๋ฅผ ํตํด ์๋ฒ์์ ๋ฐ์ ๋ฐ์ดํฐ๋ฅผ ์น ํ์ด์ง์ ์ถ๋ ฅํ ์ ์์ต๋๋ค.
<th:block th:text="${data}"></th:block>
HTML
๋ณต์ฌ
์์ ์์์์๋ data ๋ณ์์ ๊ฐ์ ํด๋น ํ๊ทธ์ ํ
์คํธ๋ก ์ค์ ํฉ๋๋ค.
ํ์๋ฆฌํ th:html
ํ์๋ฆฌํ th:html์ HTML ์์ ์์ HTML ์ฝ๋๋ฅผ ๋์ ์ผ๋ก ์ค์ ํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ์ด๋ฅผ ํตํด ์๋ฒ์์ ์์ฑ๋ HTML์ ์น ํ์ด์ง์ ์ฝ์
ํ ์ ์์ต๋๋ค.
<th:block th:html="${htmlData}"></th:block>
HTML
๋ณต์ฌ
์์ ์์์์๋ htmlData ๋ณ์์ ์ ์ฅ๋ HTML ์ฝ๋๋ฅผ ํด๋น ํ๊ทธ ์์ ๋์ ์ผ๋ก ์ฝ์
ํฉ๋๋ค.
ํ์๋ฆฌํ th:href
ํ์๋ฆฌํ th:href๋ HTML ์์์ href ์์ฑ์ ๋์ ์ผ๋ก ์ค์ ํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ์ด๋ฅผ ํตํด ์๋ฒ์์ ์์ฑ๋ ๋งํฌ๋ฅผ ์น ํ์ด์ง์ ์ ์ฉํ ์ ์์ต๋๋ค.
<a th:href="@{/path/to/page}">Link</a>
HTML
๋ณต์ฌ
์์ ์์์์๋ "/path/to/page" ๊ฒฝ๋ก๋ก ์ด๋ํ๋ ๋งํฌ๋ฅผ ์์ฑํฉ๋๋ค.
<a th:href="@{/path/to/page( param1=${value1}, param2=${value2} )">Link</a>
HTML
๋ณต์ฌ
์์ ๊ฐ์ด th:href ์์ฑ์ผ๋ก @{ } ๊ธฐํธ๋ฅผ ์ฌ์ฉํ๋ฉด,
(ํ๋ผ๋ฏธํฐ1=๊ฐ1, ํ๋ผ๋ฏธํฐ2=๊ฐ2) ํ์์ผ๋ก ์์ฒญ ํ๋ผ๋ฏธํฐ๋ฅผ ๋ ๋๋งํ ์ ์๋ค.
ex) param1: 10, param2 : 20
<a th:href="/path/to/page?param1=10¶m2=20">Link</a>
HTML
๋ณต์ฌ
th:href="@{}"์ href="" ์ฐจ์ด
th:href="@{}"๋ ํ์๋ฆฌํ์ ๋งํฌ ํํ์์ผ๋ก, ํ์๋ฆฌํ๊ฐ ์ ๊ณตํ๋ ๊ธฐ๋ฅ์ ์ฌ์ฉํ์ฌ ๋์ ์ผ๋ก ๋งํฌ๋ฅผ ์ค์ ํ ์ ์์ต๋๋ค. ๋ฐ๋ฉด href=""๋ ์ ์ ์ธ ๋ฐฉ์์ผ๋ก ๋งํฌ๋ฅผ ์ง์ ํ๋ HTML ์์ฑ์
๋๋ค.
โข
th:href="@{}" ์์: <a th:href="@{/path/to/page}">Link</a>
โข
href="" ์์: <a href="/path/to/page">Link</a>
ํ์๋ฆฌํ์ th:href๋ ์ ํ๋ฆฌ์ผ์ด์
๊ฒฝ๋ก์ ์๋๊ฒฝ๋ก๋ฅผ ์๋์ผ๋ก ์ฒ๋ฆฌํ๋ฏ๋ก, ์ ํ๋ฆฌ์ผ์ด์
๋ด๋ถ์์ ์ด๋ํ๋ ๋งํฌ๋ฅผ ํธ๋ฆฌํ๊ฒ ์์ฑํ ์ ์์ต๋๋ค.
ํ์๋ฆฌํ ์ ์ด๋ฌธ
์กฐ๊ฑด๋ฌธ
โข
<th:if>
โข
<th:switch>
ํ์๋ฆฌํ <th:if>
ํ์๋ฆฌํ th:if๋ ์กฐ๊ฑด๋ฌธ์ ์ฌ์ฉํ์ฌ ํ
ํ๋ฆฟ์์ ํน์ ๋ถ๋ถ์ ์กฐ๊ฑด์ ๋ฐ๋ผ ๋ณด์ฌ์ฃผ๊ฑฐ๋ ์จ๊ธธ ์ ์์ต๋๋ค. ์กฐ๊ฑด๋ฌธ์ ํ์๋ฆฌํ ํํ์์ผ๋ก ์์ฑ๋๋ฉฐ, ํด๋น ์กฐ๊ฑด์ด ์ฐธ์ผ ๋๋ง ํด๋น ์์๊ฐ ํ์๋ฉ๋๋ค.
<th:block th:if="${condition}">
...
</th:block>
HTML
๋ณต์ฌ
์์ ์์์์๋ condition์ด ์ฐธ์ผ ๋์๋ง ํด๋น ์์๊ฐ ํ์๋ฉ๋๋ค.
th:if ์กฐ๊ฑด๋ฌธ ์์
1.
boolean ํ์
์ ์กฐ๊ฑด์
2.
๊ฐ ๋น๊ต
3.
๊ฐ์ฒด์ ๋ณ์ ๋น๊ต
4.
๋ฌธ์์ด ๋น๊ต
boolean ํ์ ์ ์กฐ๊ฑด์
boolean checked = true; // ๋๋ false
Java
๋ณต์ฌ
<th:block th:if="${checked}">
<h1>checked ์กฐ๊ฑด์ด true ์ผ๋</h1>
</th:block>
HTML
๋ณต์ฌ
๊ฐ ๋น๊ต
int age = 20;
Java
๋ณต์ฌ
<th:if="${ age >= 20 }">
<h1>age >= 20 ์กฐ๊ฑด์ด ๋ง์กฑํ ๋</h1>
</th:if>
HTML
๋ณต์ฌ
๊ฐ์ฒด์ ๋ณ์ ๋น๊ต
public class Person {
String name = "ALOHA";
int age = 20;
}
Java
๋ณต์ฌ
<th:if="${ person.age >= 20 }">
<h1>age >= 20 ์กฐ๊ฑด์ด ๋ง์กฑํ ๋</h1>
</th:if>
HTML
๋ณต์ฌ
๋ฌธ์์ด ๋น๊ต
public class Person {
String name = "ALOHA";
int age = 20;
}
Java
๋ณต์ฌ
<th:if="${ person.name == 'ALOHA' }">
<h1>age >= 20 ์กฐ๊ฑด์ด ๋ง์กฑํ ๋</h1>
</th:if>
HTML
๋ณต์ฌ
#strings.equals( ๋ฌธ์์ด1, ๋ฌธ์์ด2 )
<th:block th:if="${ person != null && #strings.equals( person.name, 'ALOHA' ) }">
<h1 th:text="${ person.name }"></h1>
</th:block>
HTML
๋ณต์ฌ
<th:block th:if="${ person != null and person.name == 'ALOHA' }">
<h1 th:text="${ person.name }"></h1>
</th:block>
HTML
๋ณต์ฌ
AND ์ฐ์ฐ์ and ๋๋ && ๋ก ์ ์ฉํ ์ ์๋ค.
<th:block th:if="${ person != null && #strings.equals( person.name, 'ALOHA' ) }">
<h1 th:text="${ person.name }"></h1>
</th:block>
HTML
๋ณต์ฌ
<h1 th:text="${ person == null ? '์ด๋ฆ์์' : person.name }"></h1>
HTML
๋ณต์ฌ
ํ์๋ฆฌํ <th:switch>
ํ์๋ฆฌํ th:switch๋ switch๋ฌธ๊ณผ ๋น์ทํ ๋์์ ์ํํ์ฌ ํ
ํ๋ฆฟ์์ ๋ค์ํ ๊ฒฝ์ฐ์ ๋ฐ๋ผ ๋ค๋ฅธ ๋์์ ์คํํ ์ ์์ต๋๋ค. ๊ฐ ๊ฒฝ์ฐ๋ ํ์๋ฆฌํ th:case ํ๊ทธ๋ก ์ ์๋๋ฉฐ, ์กฐ๊ฑด์ ๋ฐ๋ผ ํด๋น ๊ฒฝ์ฐ๊ฐ ์คํ๋ฉ๋๋ค.
<th:block th:switch="${variable}">
<th:case="value1">...</th:case>
<th:case="value2">...</th:case>
<th:case="value3">...</th:case>
...
</th:block>
HTML
๋ณต์ฌ
์์ ์์์์๋ variable์ ๊ฐ์ ๋ฐ๋ผ ํด๋นํ๋ ๊ฒฝ์ฐ์ ์ฝ๋ ๋ธ๋ก์ด ์คํ๋ฉ๋๋ค.
๋ฐ๋ณต๋ฌธ
ํ์๋ฆฌํ <th:each>
ํ์๋ฆฌํ th:each๋ ๋ฐ๋ณต๋ฌธ์ ์ฌ์ฉํ์ฌ ํ
ํ๋ฆฟ์์ ๋์ผํ ์์๋ฅผ ์ฌ๋ฌ ๋ฒ ์ถ๋ ฅํ ์ ์์ต๋๋ค. ๋ฐ๋ณต๋ฌธ์ ํ์๋ฆฌํ ํํ์์ผ๋ก ์์ฑ๋๋ฉฐ, ์ง์ ๋ ๋ฐ์ดํฐ ์ปฌ๋ ์
์ ๊ฐ ํญ๋ชฉ์ ๋ํด ๋ฐ๋ณตํ์ฌ ์์๋ฅผ ์์ฑํฉ๋๋ค.
<th:block th:each="item : ${items}">
...
</th:block>
HTML
๋ณต์ฌ
์์ ์์์์๋ items ์ปฌ๋ ์
์ ๊ฐ ํญ๋ชฉ์ ๋ํด ํด๋น ์์๊ฐ ๋ฐ๋ณต์ ์ผ๋ก ์์ฑ๋ฉ๋๋ค.
items ์ ๋ฐฐ์ด ๋๋ ์ปฌ๋ ์
์ ์ง์ ํ์ฌ ์ ์ฒด ๋ฐ๋ณต์ ํ ์ ์์ต๋๋ค.
1.
๊ธฐ๋ณธ ๋ฐ๋ณต๋ฌธ
2.
๋ฐ๋ณต ๊ฐ์ฒด ์์ฑ
3.
ํํฐ๋ง ์กฐ๊ฑด
4.
์ค์ฒฉ ๋ฐ๋ณต๋ฌธ
5.
isEmtpy()
๊ธฐ๋ณธ ๋ฐ๋ณต๋ฌธ
<th:block th:each="์์, iterStat : ${๋ฐฐ์ด or ์ปฌ๋ ์
}">
<th:block th:text="${ ์์ }"></th:block>
<th:block th:text="${ ์์.๋ณ์ }"></th:block>
</th:block>
HTML
๋ณต์ฌ
๋ฐ๋ณต ๊ฐ์ฒด ์์ฑ
์์ฑ | ์ค๋ช
|
iterStat.index | 0๋ถํฐ ์์ํ๋ ์ธ๋ฑ์ค |
iterStat.count | 1๋ถํฐ ์์ํ๋ ์๋ฒ |
iterStat.size | ์ปฌ๋ ์
์ ์ด ํฌ๊ธฐ |
iterStat.even | ํ์ฌ ์ธ๋ฑ์ค๊ฐ ์ง์์ธ์ง (true ๋๋ false) |
iterStat.odd | ํ์ฌ ์ธ๋ฑ์ค๊ฐ ํ์์ธ์ง (true ๋๋ false) |
iterStat.first | ์ฒซ ๋ฒ์งธ ์์์ธ์ง (true ๋๋ false) |
iterStat.last | ๋ง์ง๋ง ์์์ธ์ง (true ๋๋ false) |
<th:block th:each="item, iterStat : ${items}">
index : <th:block th:text=${iterStat.index}></th:block>
count: <th:block th:text=${iterStat.count}></th:block>
size: <th:block th:text=${iterStat.size}></th:block>
...
</th:block>
HTML
๋ณต์ฌ
ํํฐ๋ง ์กฐ๊ฑด
<th:block th:each="์์, iterStat : ${๋ฐฐ์ด or ์ปฌ๋ ์
}"
th:if="${ ์กฐ๊ฑด }">
<th:block th:text="${ ์์ }"></th:block>
<th:block th:text="${ ์์.๋ณ์ }"></th:block>
</th:block>
HTML
๋ณต์ฌ
th:each ๋ฐ๋ณต ์์์, th:if="${ ์กฐ๊ฑด }" ์กฐ๊ฑด์ ๋ง์กฑํ๋ ์์๋ง ํํฐ๋งํ์ฌ ์ถ๋ ฅํ ์ ์๋ค.
์ค์ฒฉ ๋ฐ๋ณต๋ฌธ
public class Users {
public String username;
public String password;
public String name;
public List<UserAuth> authList;
}
Java
๋ณต์ฌ
public class UserAuth {
public String username;
public String auth;
}
Java
๋ณต์ฌ
List<Users> userList;
Java
๋ณต์ฌ
<th:block th:each="user, iterStat : ${userList}">
<th:block th:text="${user.name}"></th:block>
...
<th:block th:each="auth, iterStat : ${user.authList}">
<th:block th:text="${auth.username}"></th:block>
<th:block th:text="${auth.auth}"></th:block>
...
</th:block>
</th:block>
HTML
๋ณต์ฌ
isEmtpy()
์ง์ ํ ์ปฌ๋ ์
์ด ๋น์ด ์๋์ง ํ์ธํ๋ ๋ฉ์๋
<th:block th:if="${ ์ปฌ๋ ์
.isEmpty()}">
</th:block>
HTML
๋ณต์ฌ
<th:block th:if=" #lists.isEmpty( ์ปฌ๋ ์
) ">
</th:block>
HTML
๋ณต์ฌ
th:classappend=โ${ ์กฐ๊ฑด ? โ์์ฑ1โ : โ์์ฑ2โ }โ
<th:block th:each=" item, iterStat : ${items}" >
<tr class="row" th:classappend="${ iterStat.odd ? 'odd' : 'even' }">
<td><th:block th:text="${iterStat.index}"></th:block></td>
<td><th:block th:text="${iterStat.count}"></th:block></td>
<td><th:block th:text="${iterStat.size}"></th:block></td>
<td><th:block th:text="${item}"></th:block></td>
<td><th:block th:text="${iterStat.odd}"></th:block></td>
<td><th:block th:text="${iterStat.even}"></th:block></td>
<td><th:block th:text="${iterStat.first}"></th:block></td>
<td><th:block th:text="${iterStat.last}"></th:block></td>
</tr>
</th:block>
HTML
๋ณต์ฌ
th:classappend=โโ ์กฐ๊ฑด์ ๋ง์กฑํ๋ ๊ฒฝ์ฐ์ ํด๋์ค ์์ฑ์ ์ถ๊ฐํ๋ค.
ํ์๋ฆฌํ th:object
ํ์๋ฆฌํ์ th:object๋ ํผ ์ฒ๋ฆฌ๋ฅผ ๊ฐ์ํํ๋ ๋ฐ ์ฌ์ฉ๋๋ ์ค์ํ ๊ธฐ๋ฅ์
๋๋ค. ์ด ์์ฑ์ ์ฌ์ฉํ๋ฉด ํผ๊ณผ ๊ด๋ จ๋ ๊ฐ์ฒด๋ฅผ ์ง์ ํ์ฌ ํด๋น ๊ฐ์ฒด์ ์์ฑ์ ์ฝ๊ฒ ์ ๊ทผํ ์ ์์ต๋๋ค.
์ฃผ์ ํน์ง:
โข
๊ฐ์ฒด ๋ฐ์ธ๋ฉ: th:object๋ฅผ ์ฌ์ฉํ์ฌ ํผ์ ๊ฐ์ฒด๋ฅผ ๋ฐ์ธ๋ฉํฉ๋๋ค. ์ด๋ฅผ ํตํด ํผ ํ๋์ ๊ฐ์ฒด ์์ฑ์ ์ฝ๊ฒ ์ฐ๊ฒฐํ ์ ์์ต๋๋ค.
โข
*{...} ๋ฌธ๋ฒ: th:object์ ํจ๊ป *{...} ๋ฌธ๋ฒ์ ์ฌ์ฉํ์ฌ ๋ฐ์ธ๋ฉ๋ ๊ฐ์ฒด์ ์์ฑ์ ์ง์ ์ ๊ทผํ ์ ์์ต๋๋ค.
โข
์ฝ๋ ๊ฐ์ํ: ๋ฐ๋ณต์ ์ธ ๊ฐ์ฒด ์ฐธ์กฐ๋ฅผ ์ค์ฌ ์ฝ๋๋ฅผ ๋ ๊ฐ๊ฒฐํ๊ณ ์ฝ๊ธฐ ์ฝ๊ฒ ๋ง๋ญ๋๋ค.
th:object="${๊ฐ์ฒด}โ
์์ ํ๊ทธ์์ ๊ฐ์ฒด๋ฅผ ๋ฑ๋กํ๊ณ , ํ์ ํ๊ทธ์์ *{๋ณ์} ํํ๋ก ์ ๊ทผ ๊ฐ๋ฅ
<div th:object="${user}">
<ul>
<li th:text="*{no}"></li>
<li th:text="*{id}"></li>
<li th:text="*{username}"></li>
<li th:text="*{password}"></li>
<li th:text="*{name}"></li>
<li th:text="*{ #dates.format( createdAt, 'yyyy-MM-dd HH:mm:ss' ) }"></li>
<li th:text="*{ #dates.format( updatedAt, 'yyyy-MM-dd HH:mm:ss' ) }"></li>
</ul>
</div>
HTML
๋ณต์ฌ
ํ์๋ฆฌํ form
th:field="*{๋ณ์}"
id, name, value ์์ฑ์ ์๋์ผ๋ก ์์ฑ
<form action="" method="post" th:object="${user}">
<input type="text" th:field="*{no}"> <br>
<input type="text" th:field="*{id}"> <br>
<input type="text" th:field="*{username}"> <br>
<input type="text" th:field="*{password}"> <br>
<input type="text" th:field="*{name}"> <br>
</form>
HTML
๋ณต์ฌ
์์๊ฐ์ด ์ฝ๋๋ฅผ ์์ฑํ๋ฉด ์ค์ ๋ก๋ ์๋์ ๊ฐ์ด ๋๋๋ง๋๋ค.
<form action="" method="post">
<input type="text" id="no" name="no" value="1"> <br>
<input type="text" id="id" name="id" value="c8f3ed9e-b16e-4d94-9c5c-1eaf1e5b17f1"> <br>
<input type="text" id="username" name="username" value="ALOHA"> <br>
<input type="text" id="password" name="password" value="123456"> <br>
<input type="text" id="name" name="name" value="์๋กํ"> <br>
</form>
HTML
๋ณต์ฌ
๋ผ๋์ค ๋ฒํผ (input type=โradioโ) ์ฒดํฌํ๊ธฐ
<form action="" method="post" th:object="${user}">
...
<input type="radio" id="male" value="๋จ์" name="gender" th:checked="*{ gender == '๋จ์' }">
<label for="male">๋จ์</label>
<input type="radio" id="female" value="์ฌ์" name="gender" th:checked="*{ gender == '์ฌ์' }">
<label for="female">์ฌ์</label>
...
</form>
HTML
๋ณต์ฌ
์ ํ ์์ (select) ์ฒดํฌํ๊ธฐ
select ์ th:field="*{type}" ๋ฅผ ์ฌ์ฉํ๋ฉด, type ๊ฐ๊ณผ ์ผ์นํ๋ option ์ ์๋์ผ๋ก ์ ํ
<form action="" method="post" th:object="${user}">
...
<select th:field="*{type}">
<option value="์ฌ์ฉ์ ํ์
" disabled>์ฌ์ฉ์ ํ์
</option>
<option value="์ฌ์ฉ์">์ฌ์ฉ์</option>
<option value="๊ด๋ฆฌ์">๊ด๋ฆฌ์</option>
</select>
...
</form>
HTML
๋ณต์ฌ
th:selected=โ${ ์กฐ๊ฑด }โ, th:selected=โ*{ ์กฐ๊ฑด }โ ํํ๋ก selected ์ฌ๋ถ๋ฅผ ์ง์ ํ ์ ๋ ์์
<form action="" method="post" th:object="${user}">
...
<select name="type">
<option value="์ ํ์ํจ" th:selected="*{ type == null }">์ ํ์ํจ</option>
<option value="์ฌ์ฉ์" th:selected="*{ type == '์ฌ์ฉ์' }">์ฌ์ฉ์</option>
<option value="๊ด๋ฆฌ์" th:selected="*{ type == '๊ด๋ฆฌ์' }">๊ด๋ฆฌ์</option>
</select>
...
</form>
HTML
๋ณต์ฌ
๋ ์ง (input type=โdateโ) ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ์ง์ ํ๊ธฐ
โyyyy-MM-ddโ ํฌ๋งท์ ๊ฐ์ ์ง์ ํด์ฃผ๋ฉด ๋ค์ด๊ฐ๋ค
<form action="" method="post" th:object="${user}">
...
<input type="date" th:value="*{ #dates.format( createdAt, 'yyyy-MM-dd' ) }"
id="createdAt" name="createdAt"> <br>
<input type="date" th:value="*{ #dates.format( updatedAt, 'yyyy-MM-dd' ) }"
id="updatedAt" name="updatedAt"> <br>
...
</form>
HTML
๋ณต์ฌ
ํ์๋ฆฌํ th:with
th:with๋ ํ
ํ๋ฆฟ ๋ด์์ ์ง์ญ ๋ณ์๋ฅผ ์ ์ธํ๊ณ ์ฌ์ฉํ ์ ์๊ฒ ํด์ฃผ๋ ์์ฑ์
๋๋ค. ๋ณต์กํ ํํ์์ ๊ฐ๋จํ๊ฒ ๋ง๋ค๊ฑฐ๋ ๋ฐ๋ณต์ ์ธ ๊ณ์ฐ์ ์ค์ผ ๋ ์ ์ฉํฉ๋๋ค.
์ฃผ์ ํน์ง:
โข
์ง์ญ ๋ณ์ ์ ์ธ: th:with๋ฅผ ์ฌ์ฉํ์ฌ ํด๋น ํ๊ทธ ๋ฒ์ ๋ด์์๋ง ์ฌ์ฉ ๊ฐ๋ฅํ ๋ณ์๋ฅผ ์ ์ธํ ์ ์์ต๋๋ค.
โข
๋ณต์กํ ํํ์ ๊ฐ์ํ: ๊ธด ํํ์์ ๋ณ์์ ์ ์ฅํ์ฌ ์ฝ๋์ ๊ฐ๋
์ฑ์ ๋์ผ ์ ์์ต๋๋ค.
โข
์ฑ๋ฅ ์ต์ ํ: ๋์ผํ ํํ์์ ์ฌ๋ฌ ๋ฒ ๊ณ์ฐํ๋ ๋์ ํ ๋ฒ๋ง ๊ณ์ฐํ์ฌ ๋ณ์์ ์ ์ฅํ ์ ์์ต๋๋ค.
th:with="๋ณ์๋ช
=${ํํ์}"
์ฌ๋ฌ ๋ณ์๋ฅผ ์ ์ธํ ๋๋ ์ผํ๋ก ๊ตฌ๋ถํฉ๋๋ค: th:with="๋ณ์1=${ํํ์1}, ๋ณ์2=${ํํ์2}"
๊ธฐ๋ณธ ์ฌ์ฉ ์์ :
<div th:with="userName=${user.name}">
<p th:text="|์๋
ํ์ธ์, ${userName}๋!|"></p>
<p th:text="|${userName}๋์ ์ ๋ณด์
๋๋ค.|"></p>
</div>
HTML
๋ณต์ฌ
์ฌ๋ฌ ๋ณ์ ์ ์ธ:
<div th:with="firstName=${user.name}, lastName=${user.surname}">
<p th:text="|์ด๋ฆ: ${firstName} ${lastName}|"></p>
</div>
HTML
๋ณต์ฌ
๋ณต์กํ ๊ณ์ฐ ๊ฐ์ํ:
<div th:with="totalPrice=${product.price * product.quantity},
discount=${totalPrice * 0.1},
finalPrice=${totalPrice - discount}">
<p>์ํ ๊ฐ๊ฒฉ: <span th:text="${totalPrice}"></span>์</p>
<p>ํ ์ธ ๊ธ์ก: <span th:text="${discount}"></span>์</p>
<p>์ต์ข
๊ฐ๊ฒฉ: <span th:text="${finalPrice}"></span>์</p>
</div>
HTML
๋ณต์ฌ
๋ฐ๋ณต๋ฌธ๊ณผ ํจ๊ป ์ฌ์ฉ:
<tr th:each="user : ${userList}" th:with="isAdmin=${user.type == '๊ด๋ฆฌ์'}">
<td th:text="${user.name}"></td>
<td th:text="${isAdmin} ? '๊ด๋ฆฌ์' : '์ผ๋ฐ ์ฌ์ฉ์'"></td>
<td>
<span th:if="${isAdmin}" class="badge">ADMIN</span>
</td>
</tr>
HTML
๋ณต์ฌ
th:with๋ก ์ ์ธ๋ ๋ณ์๋ ํด๋น ํ๊ทธ์ ๊ทธ ํ์ ํ๊ทธ์์๋ง ์ฌ์ฉํ ์ ์์ต๋๋ค.
ํ์๋ฆฌํ ์ธ์ ์ ๋ณด ๊ฐ์ ธ์ค๊ธฐ
// ๋ก๊ทธ์ธ ์ ์
Users loginUser = new Uers();
loginUser.setNo(1L);
loginUser.setId( UUID.randomUUID().toString() );
loginUser.setUsername("ALOHA");
loginUser.setPassword("123456");
loginUser.setName("์ค์น์");
loginUser.setGender("์ฌ์"); // ๋จ์ ์ฌ์
loginUser.setType("๊ด๋ฆฌ์"); // ์ฌ์ฉ์ ๊ด๋ฆฌ์
loginUser.setCreatedAt(new Date());
loginUser.setUpdatedAt(new Date());
loginUser.setAuthList(authList);
session.setAttribute("loginUser", loginUser);
model.addAttribute("loginUser", loginUser);
Java
๋ณต์ฌ
@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class Users {
private Long no;
private String id;
private String username;
private String password;
private String name;
private String gender;
private String type;
private Date createdAt;
private Date updatedAt;
List<UserAuth> authList;
// ์ฌ์ฉ์ ๊ถํ ํ์ธ ๋ฉ์๋
public boolean containsAuth(String auth) {
for (UserAuth userAuth : authList) {
if (userAuth.getAuth().equals(auth)) {
return true;
}
}
return false;
}
}
Java
๋ณต์ฌ
<!-- ์ธ์
๊ฐ์ ธ์ค๊ธฐ -->
<h2>${session.loginUser}</h2>
<h3 th:text="${session.loginUser.name}"></h3>
<h3 th:text="${session.loginUser.username}"></h3>
<h3 th:text="${session.loginUser.password}"></h3>
HTML
๋ณต์ฌ
ํ์๋ฆฌํ ์๋ฐ ๋ฉ์๋ ํธ์ถ
// ๊ถํ
UserAuth roleUser = UserAuth.builder().auth("ROLE_USER").build();
UserAuth roleAdmin = UserAuth.builder().auth("ROLE_ADMIN").build();
List<UserAuth> authList = List.of( roleUser, roleAdmin );
// ๋ก๊ทธ์ธ ์ ์
Users loginUser = new Uers();
loginUser.setNo(1L);
loginUser.setId( UUID.randomUUID().toString() );
loginUser.setUsername("ALOHA");
loginUser.setPassword("123456");
loginUser.setName("์ค์น์");
loginUser.setGender("์ฌ์"); // ๋จ์ ์ฌ์
loginUser.setType("๊ด๋ฆฌ์"); // ์ฌ์ฉ์ ๊ด๋ฆฌ์
loginUser.setCreatedAt(new Date());
loginUser.setUpdatedAt(new Date());
loginUser.setAuthList(authList);
Java
๋ณต์ฌ
@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class Users {
private Long no;
private String id;
private String username;
private String password;
private String name;
private String gender;
private String type;
private Date createdAt;
private Date updatedAt;
List<UserAuth> authList;
// ์ฌ์ฉ์ ๊ถํ ํ์ธ ๋ฉ์๋
public boolean containsAuth(String auth) {
for (UserAuth userAuth : authList) {
if (userAuth.getAuth().equals(auth)) {
return true;
}
}
return false;
}
}
Java
๋ณต์ฌ
@Data
@Builder
public class UserAuth {
private String username;
private String auth;
}
Java
๋ณต์ฌ
...
<input type="checkbox" name="authList" id="role_user"
th:checked="${ loginUser.containsAuth('ROLE_USER') }">
<label for="role_user">ROLE_USER</label>
<input type="checkbox" name="authList" id="role_admin"
th:checked="${ loginUser.containsAuth('ROLE_ADMIN') }">
<label for="role_admin">ROLE_ADMIN</label>
<br>
HTML
๋ณต์ฌ
Users ๊ฐ์ฒด์ containsAuth() ๋ฉ์๋๋ฅผ ํธ์ถํ์ฌ ํด๋น ๊ฐ์ฒด๊ฐ ํน์ ๊ถํ (โROLE_USERโ, โROLE_ADMINโ) ์ ๊ฐ์ง๊ณ ์๋์ง ํ์ธํด๋ด
๋๋ค.







