-
[스프링MVC - 2편] 타임리프 기본기능 (2)스프링&스프링부트 2025. 2. 1. 15:24
연산
BasicController 추가
@GetMapping("/operation") public String operation(Model model) { model.addAttribute("nullData", null); model.addAttribute("data", "Spring!"); return "basic/operation"; }<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>산술 연산 <ul> <li>10 + 2 = <span th:text="10 + 2"></span></li> <li>10 % 2 == 0 = <span th:text="10 % 2 == 0"></span></li> </ul> </li> <li>비교 연산 <ul> <li>1 > 10 = <span th:text="1 > 10"></span></li> <li>1 gt 10 = <span th:text="1 gt 10"></span></li> <li>1 >= 10 = <span th:text="1 >= 10"></span></li> <li>1 ge 10 = <span th:text="1 ge 10"></span></li> <li>1 == 10 = <span th:text="1 == 10"></span></li> <li>1 != 10 = <span th:text="1 != 10"></span></li> </ul> </li> <li>조건식 <ul> <li>(10 % 2 == 0)? '짝수':'홀수' = <span th:text="(10 % 2 == 0)? '짝수':'홀수'"></span></li> </ul> </li> <li>Elvis 연산자 <ul> <li>${data}?: '데이터가 없습니다.' = <span th:text="${data}?: '데이터가 없습니다.'"></span></li> <li>${nullData}?: '데이터가 없습니다.' = <span th:text="${nullData}?: '데이터가 없습니다.'"></span></li> </ul> </li> <li>No-Operation <ul> <li>${data}?: _ = <span th:text="${data}?: _">데이터가 없습니다.</span></li> <li>${nullData}?: _ = <span th:text="${nullData}?: _">데이터가 없습니다.</span></li> </ul> </li> </ul> </body> </html>
- 비교연산 : HTML 엔티티를 사용해야 하는 부분을 주의
- >(gt), <(lt), >=(ge), <=(le), !(not), ==(eq), !=(neq, ne)
- 조건식 :자바의 조건식과 유사
- Elvis 연산자 : 조건식의 편의 버전
- No-Operation : _인 경우 마치 타임리프가 실행되지 않는 것 처럼 동작한다 이것을 잘 사용하면 HTML의 내용 그대로 활용할 수 있다
속성 값 설정
타임리프 태그 속성(Attribute)
타임리프는 주로 HTML 태그에 th:* 속성을 지정하는 방식으로 동작한다
th:*로 속성을 적용하면 기존 속성을 대체한다
기존 속성이 없으면 새로 만든다
BasicController 추가
@GetMapping("/attribute") public String attribute(Model model) { return "basic/attribute"; }1. 속성 설정
th:* 속성을 지정하면 타임리프는 기존 속성을 th:* 로 지정한 속성으로 대체한다 기존 속성이 없다면 새로 만든다
<input type="text" name="mock" th:name="userA" />
> 타임리프 렌더링 후 <input type="text" name="userA" />
2. 속성 추가
- th:attrappend : 속성 값의 뒤에 값을 추가한다
- th:attrprepend : 속성 값의 앞에 값을 추가한다
- th:classappend : class 속성에 자연스럽게 추가한다
3. checked 처리
타임리프의 th:checked는 값이 false인 경우 checked 속성 자체를 제거한다
<input type="checkbox" name="active" th:checked="false" />
> 타임리프 렌더링 후: <input type="checkbox"name="active" />
반복
BasicController 추가
@GetMapping("/each") public String each(Model model) { addUsers(model); return "basic/each"; } public 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); }<h1>기본 테이블</h1> <table border="1"> <tr> <th>username</th> <th>age</th> </tr> <tr th:each="user : ${users}"> <td th:text="${user.username}">username</td> <td th:text="${user.age}">0</td> </tr> </table> <h1>반복 상태 유지</h1> <table border="1"> <tr> <th>count</th> <th>username</th> <th>age</th> <th>etc</th> </tr> <tr th:each="user, userStat : ${users}"> <td th:text="${userStat.count}">username</td> <td th:text="${user.username}">username</td> <td th:text="${user.age}">0</td> <td> index = <span th:text="${userStat.index}"></span> count = <span th:text="${userStat.count}"></span> size = <span th:text="${userStat.size}"></span> even? = <span th:text="${userStat.even}"></span> odd? = <span th:text="${userStat.odd}"></span> first? = <span th:text="${userStat.first}"></span> last? = <span th:text="${userStat.last}"></span> current = <span th:text="${userStat.current}"></span> </td> </tr> </table>1. 반복 기능
<tr th:each="user : ${users}">
반복 시오른쪽 컬렉션(${users})의 값을 하나씩 꺼내서 왼쪽 변수(user)에 담아서 태그를 반복 실행한다
th:each는 List 뿐만 아니라 배열, java.util.Iterable, java.util.Enumeration을 구현한 모든 객체를 반복에 사용할 수 있다
Map도 사용할 수 있는데 이 경우 변수에 담기는 값은 Map.Entry이다
2. 반복 상태 유지
<tr th:each="user, userStat : ${users}">
반복의 두번째 파라미터를 설정해서 반복의 상태를 확인 할 수 있다
두 번째파라미터는 생략 가능한데, 생략하면 지정한 변수명(user) + Stat가 된다
여기서는 user + Stat = userStat 이므로 생략 가능하다
반복 상태 유지 기능
- index : 0부터 시작하는 값
- count : 1부터 시작하는 값
- size : 전체 사이즈
- even, odd : 홀수, 짝수 여부 (boolean)
- first, last : 처음, 마지막 여부 (boolean)
- current : 현재 객체
조건부 평가
BasicController 추가
@GetMapping("/condition") public String condition(Model model) { addUsers(model); return "basic/condition"; }<body> <h1>if, unless</h1> <table border="1"> <tr> <th>count</th> <th>username</th> <th>age</th> </tr> <tr th:each="user, userStat : ${users}"> <td th:text="${userStat.count}">1</td> <td th:text="${user.username}">username</td> <td> <span th:text="${user.age}">0</span> <span th:text="'미성년자'" th:if="${user.age lt 20}"></span> <span th:text="'미성년자'" th:unless="${user.age ge 20}"></span> </td> </tr> </table> <h1>switch</h1> <table border="1"> <tr> <th>count</th> <th>username</th> <th>age</th> </tr> <tr th:each="user, userStat : ${users}"> <td th:text="${userStat.count}">1</td> <td th:text="${user.username}">username</td> <td th:switch="${user.age}"> <span th:case="10">10살</span> <span th:case="20">20살</span> <span th:case="*">기타</span> </td> </tr> </table> </body>주석
<body> <h1>예시</h1> <span th:text="${data}">html data</span> <h1>1. 표준 HTML 주석</h1> <!-- <span th:text="${data}">html data</span> --> <h1>2. 타임리프 파서 주석</h1> <!--/* [[${data}]] */--> <!--/*--> <span th:text="${data}">html data</span> <!--*/--> <h1>3. 타임리프 프로토타입 주석</h1> <!--/*/ /*/--> <span th:text="${data}">html data</span> </body> // 결과 <h1>예시</h1> <span>Spring!</span> <h1>1. 표준 HTML 주석</h1> <!-- <span th:text="${data}">html data</span> --> <h1>2. 타임리프 파서 주석</h1> <h1>3. 타임리프 프로토타입 주석</h1> <span>Spring!</span>
1. 표준 HTML 주석 : 자바스크립트의 표준 HTML 주석은 타임리프가 렌더링 하지 않고, 그대로 남겨둔다
2. 타임리프 파서 주석 : 타임리프 파서 주석은 타임리프의 진짜 주석이다. 렌더링에서 주석 부분을 제거한다
3. 타임리프 프로토타입 주석 :
타임리프 프로토타입은 약간 특이한데, HTML 주석에 약간의 구문을 더했다
HTML 파일을 웹 브라우저에서 그대로 열어보면 HTML 주석이기 때문에 이 부분이 웹 브라우저가 렌더링하지 않는다
타임리프 렌더링을 거치면 이 부분이 정상 렌더링 된다
즉 HTML 파일을 그대로 열어보면 주석처리가 되지만, 타임리프를 렌더링 한 경우에만 보이는 기능이다
블록
<th:block>은 HTML 태그가 아닌 타임리프의 유일한 자체 태그다
<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>each를 사용하기 애매할 때 사용된다
자바스크립트 인라인
타임리프는 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다
자바스크립트 인라인 기능은 <script th:inline="javascript">와 같이 적용하면 된다
<!-- 자바스크립트 인라인 사용 전 --> <script> var username = [[${user.username}]]; var age = [[${user.age}]]; // 자바스크립트 내추럴 템플릿 var username2 = /*[[${user.username}]]*/ "test username"; // 객체 var user = [[${user}]]; </script> <!-- 자바스크립트 인라인 사용 후 --> <script th:inline="javascript"> var username = [[${user.username}]]; var age = [[${user.age}]]; // 자바스크립트 내추럴 템플릿 var username2 = /*[[${user.username}]]*/ "test username"; // 객체 var user = [[${user}]]; </script>
1. 텍스트 렌더링
var username = [[${user.username}]];
- 인라인 사용 전 : var username = userA;
- 인라인 사용 후 : var username = "userA";
결과적으로 userA가 변수명으로 사용되어서 자바스크립트 오류가 발생한다
인라인 사용 후 렌더링 결과를 보면 문자 타입인 경우 "를 포함해준다
추가로 자바스크립트에서 문제가 될 수 있는 문자가 포함되어 있으면 이스케이프 처리도 해준다
예) " > \"
2. 자바스크립트 내추럴 템플릿
타임리프는 HTML 파일을 직접 열어도 동작하는 내추럴 템플릿 기능을 제공한다
자바스크립트 인라인 기능을 사용하면 주석을 활용해서 이 기능을 사용할 수 있다
var username2 = /*[[${user.username}]]*/ "test username";
- 인라인 사용 전 : var username2 = /*userA*/ "test username";
- 인라인 사용 후 : var username2 = "userA";
인라인 사용 후 결과를 보면 주석 부분이 제거되고, 기대한 "userA"가 정확하게 적용된다
3. 객체
타임리프의 자바스크립트 인라인 기능을 사용하면 객체를 JSON으로 자동으로 변환해준다
var user = [[${user}]];
- 인라인 사용 전 : var user = BasicController.User(username=userA, age=10);
- 인라인 사용 후 : var user = {"username":"userA","age":10};
인라인 사용 전은 객체의 toString()이 호출된 값이며 인라인 사용 후는 객체를 JSON으로 변환해준다
자바스크립트 인라인 each
<!-- 자바스크립트 인라인 each --> <script th:inline="javascript"> [# th:each="user, stat : ${users}"] var user[[${stat.count}]] = [[${user}]]; [/] </script>템플릿 조각
1. 부분 포함 insert : <div th:insert="~{template/fragment/footer :: copy}"></div>
<h2>부분 포함 insert</h2> <div> <footer> 푸터 자리 입니다. </footer> </div>th:insert를 사용하면 현재 태그(div) 내부에 추가한다
2. 부분 포함 replace : <div th:replace="~{template/fragment/footer :: copy}"></div>
<h2>부분 포함 replace</h2> <footer> 푸터 자리 입니다. </footer>th:replace를 사용하면 현재 태그(div)를 대체한다
3. 부분 포함 단순 표현식 : <div th:replace="template/fragment/footer :: copy"></div>
<h2>부분 포함 단순 표현식</h2> <footer> 푸터 자리 입니다. </footer>~{...}를 사용하는 것이 원칙이지만 템플릿 조각을 사용하는 코드가 단순하면 이 부분을 생략할 수 있다
4. 파라미터 사용 : <div th:replave="~{template/frament/footer :: copyParam('데이터1', '데이터2')}">
<footer th:fragment="copyParam (param1, param2)"> <p>파라미터 자리 입니다.</p> <p th:text="${param1}"></p> <p th:text="${param2}"></p> </footer><h1>파라미터 사용</h1> <footer> <p>파라미터 자리 입니다.</p> <p>데이터1</p> <p>데이터2</p> </footer>템플릿 레이아웃
<html xmlns:th="http://www.thymeleaf.org"> <head th:fragment="common_header(title,links)"> <title th:replace="${title}">레이아웃 타이틀</title> <!-- 공통 --> <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}"> <link rel="shortcut icon" th:href="@{/images/favicon.ico}"> <script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script> <!-- 추가 --> <th:block th:replace="${links}" /> </head><!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head th:replace="template/layout/base :: common_header(~{::title},~{::link})"> <title>메인 타이틀</title> <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"> <link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}"> </head> <body> 메인 컨텐츠 </body> </html>
결과
- 메인타이틀이 전달한 부분으로 교체되었다
- 공통부분은 그대로 유지되고, 추가 부분에 전달한 <link>들이 포함되었다
- common_header(~{::title},~{::link})
- ::title은 현재 페이지의 title 태그들을 전달한다
- ::link는 현재 페이지의 link 태그들을 전달한다
템플릿 레이아웃 확장
<!DOCTYPE html> <html th:fragment="layout (title, content)" xmlns:th="http://www.thymeleaf.org"> <head> <title th:replace="${title}">레이아웃 타이틀</title> </head> <body> <h1>레이아웃 H1</h1> <div th:replace="${content}"> <p>레이아웃 컨텐츠</p> </div> <footer> 레이아웃 푸터 </footer> </body> </html><!DOCTYPE html> <html th:replace="~{template/layoutExtend/layoutFile :: layout(~{::title}, ~{::section})}" xmlns:th="http://www.thymeleaf.org"> <head> <title>메인 페이지 타이틀</title> </head> <body> <section> <p>메인 페이지 컨텐츠</p> <div>메인 페이지 포함 내용</div> </section> </body> </html>layoutFile.html을 보면 기본 레이아웃을 가지고 있는데, <html>에 th:fragment 속성이 정의되어 있다
이 레이아웃 파일을 기본으로 하고 여기에 필요한 내용을 전달해서 부분부분 변경하는 것으로 이해하면 된다
layoutExtendMain.html는 현재 페이지인데, <html> 자체를 th:replace를 사용해서 변경하는 것을 확인 할 수 있다
결국 layoutFile.html에 필요한 내용을 전달하면서 <html> 자체를 layoutFile.html로 변경한다
728x90'스프링&스프링부트' 카테고리의 다른 글
[스프링MVC - 2편] 타임리프 스프링 통합 (2) (0) 2025.02.02 [스프링MVC - 2편] 타임리프 스프링 통합 (1) (0) 2025.02.01 [스프링MVC - 2편] 타임리프 기본기능 (1) (0) 2025.01.31 [스프링MVC - 1편] 스프링 MVC - 웹 페이지 만들기 (2) (0) 2025.01.30 [스프링MVC - 1편] 스프링 MVC - 웹 페이지 만들기 (1) (0) 2025.01.30 - 비교연산 : HTML 엔티티를 사용해야 하는 부분을 주의