개발놀이터
타임리프기본2 본문
본 포스트는 김영한님의 인프런강의 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술을 보고 정리한 포스트입니다. 자세한 내용은 강의를 참고해주세요
*반복
타임리프에서 반복은 th:each를 사용한다. 추가로 반복에서 사용할 수 있는 여러 상태 값을 지원한다.
<tr th:each="user : ${users}">
반복 시 오른쪽 컬렉션 ${users}의 값을 하나씩 꺼내서 왼쪽 변수에 담아서 태그를 반복 실행한다.
th:each는 List 뿐만 아니라 배열, Iterable, Enumeration을 구현한 모든 객체를 반복에 사용할 수 있다. Map도 사용할 수 있는데 이 경우에 변수에 담기는 값은 Map.Entry이다.
반복 상태 유지 기능
-index : 0부터 시작하는 값
-count : 1부터 시작하는 값
-size : 전체 사이즈
-even, odd : 홀수, 짝수 여부
-first, last : 처음, 마지막 여부
-current : 현재 객체
*조건부 평가
타임리프의 조건식 : if, unless
타임리프는 해당 조건이 맞지 않으면 태그 자체를 랜더링하지 않는다. 만약 다음 조건이 false인 경우 <span>태그 자체가 랜더링되지 않고 사라진다
<span th:text="미성년자" th:if="${user.age lt 20}"></span>
*템플릿 조각
웹 페이지를 개발할 때는 공통 영역이 많이 있다. 예를 들어서 상단 영역이나 하단 영역, 좌측 카테고리 등등 여러 페이지에서 함께 사용하는 영역들이 있다. 이런 부분을 코드를 복사해서 사용한다면 변경시 여러 페이지를 다 수정해야 하므로 상당히 비효율적이다. 타임리프는 이런 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원한다.
/template/fragment/footer.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<footer th:fragment="copy">
푸터 자리 입니다.
</footer>
<footer th:fragment="copyParam (param1, param2)">
<p>파라미터 자리 입니다.</p>
<p th:text="${param1}"></p>
<p th:text="${param2}"></p>
</footer>
</body>
</html>
/template/fragment/fragmentMain.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>부분 포함</h1>
<h2>부분 포함 insert</h2>
<div th:insert="~{template/fragment/footer :: copy}"></div>
<h2>부분 포함 replace</h2>
<div th:replace="~{template/fragment/footer :: copy}"></div>
<h2>부분 포함 단순 표현식</h2>
<div th:replace="template/fragment/footer :: copy"></div>
<h1>파라미터 사용</h1>
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>
</body>
</html>
insert = div내부에 추가한다.
replace = div태그를 대체한다.
다음과 같이 파라미터를 전달해서 동적으로 조각을 랜더링할 수도 있다.
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>
'Spring > Spring' 카테고리의 다른 글
스프링 메시지 / 국제화 (0) | 2021.10.18 |
---|---|
타임리프심화1 (0) | 2021.10.16 |
타임리프기본1 (0) | 2021.10.13 |
스프링 dirty checking과 merge (0) | 2021.08.31 |
스프링 RedirectAttribute (0) | 2021.08.21 |