타임리프 - 기본 기능 2

LeeKyoungChang·2022년 1월 21일
스프링 MVC 2편
0

spring, jpa 강의를 보고 정리한 내용입니다.

목록 보기
32/107
post-thumbnail

'스프링 MVC 2편 - 백엔드 웹 개발 활용 기술' 수업을 듣고 정리한 내용입니다.

 

📚 1. 반복

타임리프에서 반복은 th:each 를 사용한다. 추가로 반복에서 사용할 수 있는 여러 상태 값을 지원한다.

 

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);
    }

 

/resources/templates/basic/each.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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>
</body>
</html>

 

📖 A. 반복 기능

<tr th:each="user : ${users}">

➡️ 반복시 오른쪽 컬렉션( ${users} )의 값을 하나씩 꺼내서 왼쪽 변수( user )에 담아서 태그를 반복 실행한다.
➡️ th:each 는 List 뿐만 아니라 배열, java.util.Iterable , java.util.Enumeration 을 구현한 모든 객체를 반복에 사용할 수 있다.
➡️ Map 도 사용할 수 있는데 이 경우 변수에 담기는 값은 Map.Entry 이다.

 

📖 B. 반복 상태 유지

<tr th:each="user, userStat : ${users}">

➡️ 반복의 두번째 파라미터를 설정해서 반복의 상태를 확인 할 수 있다.
➡️ 두번째 파라미터는 생략 가능한데, 생략하면 지정한 변수명 ( user ) + Stat 가 된다.

  • 여기서는 user + Stat = userStat이므로 생략 가능하다.
    (usersStat는 불가능)

 

📖 C. 반복 상태 유지 기능

  • index : 0부터 시작하는 값
  • count : 1부터 시작하는 값
  • size : 전체 사이즈
  • even , odd : 홀수, 짝수 여부( boolean )
  • first , last :처음, 마지막 여부( boolean )
  • current : 현재 객체

 

실행 결과
스크린샷 2022-01-21 오전 11 58 48

스크린샷 2022-01-21 오전 11 37 00

 

📚 2. 조건부 평가

  • 타임리프의 조건식
  • th:if, th:unless (if의 반대)

 

BasicController에 추가

    @GetMapping("/condition")
    public String condition(Model model) {
        addUsers(model);
        return "basic/condition";
    }

 

/resources/templates/basic/condition.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<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>
</html>

 

📖 A. if, unless

  • 타임리프는 해당 조건이 맞지 않으면 태그 자체를 렌더링하지 않는다.
  • 만약 다음 조건이 false 인 경우 <span>...<span> 부분 자체가 렌더링 되지 않고 사라진다.
    ➡️ <span th:text="'미성년자'" th:if="${user.age lt 20}"></span>

 

📖 B. switch

  • th:switch 를 통해 기준이 될 변수를 지정한다.
  • th:case를 통해 case를 나누면 된다.
  • * 은 만족하는 조건이 없을 때 사용하는 디폴트이다.
<td th:switch="${user.age}">
    <span th:case="10">10살</span>
    <span th:case="20">20살</span>
    <span th:case="*">기타</span>
</td>

 

실행 결과
스크린샷 2022-01-21 오후 12 05 43

스크린샷 2022-01-21 오후 12 06 21 스크린샷 2022-01-21 오후 12 06 58

 

📚 3. 주석

BasicController에 추가

    @GetMapping("/comments")
    public String comments(Model model){
        model.addAttribute("data", "Spring!");
        return "basic/comments";
    }

 

/resources/templates/basic/comments.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<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>
</html>

 

실행 결과
스크린샷 2022-01-21 오후 12 21 01

스크린샷 2022-01-21 오후 12 21 11
  • 표준 HTML 주석만 보인다. (이외는 보이지 않는다.)

 

📖 A. 표준 HTML 주석

  • HTML에서 사용하는 기본적인 주석 사용법과 동일하다.
  • 자바스크립트의 표준 HTML 주석은 타임리프가 렌더링 하지 않고, 그대로 남겨둔다.
  • Format : <!-- contents -->
<!--
<span th:text="${data}">html data</span>
-->

 

📖 B. 타임리프 파서 주석

  • 많이 사용되는 주석
  • 타임리프 파서 주석은 타임리프의 진짜 주석이다.
  • 렌더링에서 주석 부분을 제거한다.
  • Format
    ➡️ 한 줄 : <!--/* contents */-->
    ➡️ 여러 줄 : <!--/*--> \n contents \n <!--*/-->
<!--/* [[${data}]] */-->

<!--/*-->
<span th:text="${data}">html data</span>
<!--*/-->

 

📖 C. 타임리프 프로토타입 주석

  • HTML 파일을 그대로 열어보면 주석처리가 되지만, 타임리프를 렌더링 한 경우에만 보이는 기능이다.
  • Format : <!--/*/ contents /*/-->
<!--/*/
<span th:text="${data}">html data</span>
/*/-->

 

📚 4. 블록

  • <th:block>은 HTML 태그가 아닌 타임리프의 유일한 자체 태그다.
  • 렌더링 시 제거되며, 타임리프의 속성을 사용하기 애매한 경우 사용된다.
  • 대표적으로, th:each로 반복하고자 할 때, 한 요소가 아닌 동등한 레벨의 여러 요소를 그룹화하여 반복하고자 할 때 유용하다.

 

BasicController에 추가

    @GetMapping("/block")
    public String block(Model model) {
        addUsers(model);
        return "basic/block";
    }

 

/resources/templates/basic/block.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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>
</body>
</html>

 

실행 결과
스크린샷 2022-01-21 오후 12 48 17

스크린샷 2022-01-21 오후 12 48 25
  • 타임리프의 특성상 HTML 태그안에 속성으로 기능을 정의해서 사용하는데, 위 예처럼 이렇게 사용하기 애매한 경우에 사용하면 된다.
  • <th:block>은 렌더링시 제거된다.

 

📚 5. 자바스크립트 인라인

  • 타임리프는 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다.

 

<script th:inline="javascript">
이를 추가할 시, 자바스크립트 인라인 기능을 사용할 수 있다.

 

BasicController 추가

    @GetMapping("/javascript")
    public String javascript(Model model){
        model.addAttribute("user", new User("UserA", 10));
        addUsers(model);

        return "basic/javascript";
    }

 

/resources/templates/basic/javascript.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<!-- 자바스크립트 인라인 사용 전 -->
<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";
    // username2에 /*[[${user.username}]]*/ user.username 가 삽입된다.

    //객체
    var user = [[${user}]];
</script>

<!-- 자바스크립트 인라인 each -->
<script th:inline="javascript">
    [# th:each="user, stat : ${users}"]
    var user[[${stat.count}]] = [[${user}]];
    [/]
</script>

</body>
</html>

 

자바스크립트 인라인을 사용하지 않은 경우 어떤 문제들이 있는지 알아보고, 인라인을 사용하면 해당 문제들이 어떻게 해결되는지 확인해보자!

📖 A. 자바스크립트 인라인 사용 전

<script>
    var username = [[${user.username}]];
    var age = [[${user.age}]];
    //자바스크립트 내추럴 템플릿
    var username2 = /*[[${user.username}]]*/ "test username";
    //객체
    var user = [[${user}]];
</script>

 

✓ 텍스트 렌더링
var username = [[${user.username}]]; → var username = userA;

  • 결과를 보면 userA 라는 변수 이름이 그대로 남아있다.
  • userA는 문자열인데 작은 따옴표(or 큰 따옴표)가 없어서 변수명으로 인식하여 오류가 발생한다.

 

✓ 자바스크립트 내추럴 템플릿
var username2 = /*[[${user.username}]]*/ "test username"; → var username2 = /*userA*/ "test username";

  • 결과를 보면 정말 순수하게 그대로 해석을 해버렸다.
  • 따라서 내추럴 템플릿 기능이 동작하지 않고, 심지어 렌더링 내용이 주석처리 되어 버린다.

 

✓ 객체
var user = [[${user}]]; → var user = BasicController.User(username=userA, age=10);

  • 객체의 toString()이 호출된 값 이므로 분리해서 파싱하기 까다롭다.

 

📖 B. 자바스크립트 인라인 사용 후

<script th:inline="javascript">
    var username = [[${user.username}]];
    var age = [[${user.age}]];
	
    //자바스크립트 내추럴 템플릿
    var username2 = /*[[${user.username}]]*/ "test username";
	
    //객체
    var user = [[${user}]];
</script>

✓ 텍스트 렌더링
var username = [[${user.username}]]; → var username = "userA";

  • 인라인 사용 후 렌더링 결과를 보면 문자 타입인 경우 "를 포함해준다.
  • 추가로 자바스크립트에서 문제가 될 수 있는 문자가 포함되어 있으면 이스케이프 처리도 해준다. 예) " → \"

 

✓ 자바스크립트 내추럴 템플릿

  • 타임리프는 HTML 파일을 직접 열어도 동작하는 내추럴 템플릿 기능을 제공한다.
  • 자바스크립트 인라인 기능을 사용하면 주석을 활용해서 이 기능을 사용할 수 있다.

 

var username2 = /*[[${user.username}]]*/ "test username"; → var username2 = "userA";

  • 결과를 보면 주석 부분이 제거되고, 기대한 "userA"가 정확하게 적용된다.

 

✓ 객체

var user = [[${user}]];
→ var user = {"username":"userA","age":10};

  • 타임리프의 자바스크립트의 인라인 기능을 사용하면 객체를 JSON으로 자동 변환해준다.

 

실행 결과

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 자바스크립트 인라인 사용 전 -->
<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>
</body>
</html>
스크린샷 2022-01-21 오후 1 22 22

 

📖 C. 자바스크립트 인라인 each

자바스크립트 인라인은 each를 지원한다.

 

/resources/templates/basic/javascript.html에 추가

<!-- 자바스크립트 인라인 each -->
<script th:inline="javascript">
    [# th:each="user, stat : ${users}"]
    var user[[${stat.count}]] = [[${user}]];
    [/]
</script>

 

자바스크립트 인라인 each 결과

 <script>
  var user1 = {"username":"userA","age":10};
  var user2 = {"username":"userB","age":20};
  var user3 = {"username":"userC","age":30};
  </script>

 

전체 결과
스크린샷 2022-01-21 오후 1 32 32

 

📚 6. 템플릿 조각

웹 페이지 개발 시 발생하는 공통 영역에서 코드를 복사해서 사용한다면 변경시 여러 페이지를 다 수정해야 하므로 상당히 비효율적이다.
타임리프는 이런 문제들을 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원한다.

 

📖 A. 템플릿 조각

package hello.thymeleaf.basic;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/template")
public class TemplateController {

    @GetMapping("/fragment")
    public String template(){
        return "template/fragment/fragmentMain";
    }
}

 

/resources/templates/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>
  • th:fragment 가 있는 태그는 다른곳에 포함되는 코드 조각으로 이해하면 된다.

 

/resources/templates/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>

 

📖 B. 템플릿 조각 사용법

template/fragment/footer :: copy
: template/fragment/footer.html 템플렛에 있는 th:fragment="copy"라는 부분을 템플릿 조각으로 가져와서 사용한다는 의미

<footer th:fragment="copy">
	푸터 자리 입니다. 
</footer>

 

(1) 부분 포함 insert

<div th:insert="~{template/fragment/footer :: copy}"></div>

th:insert 를 사용하면 템플릿 조각을 현재 태그( div ) 내부에 추가한다.

 

실행 결과

<h2>부분 포함 insert</h2>
<div>
<footer>
푸터 자리 입니다.
</footer>
</div>

 

(2) 부분 포함 replace

<div th:replace="~{template/fragment/footer :: copy}"></div>

th:replace를 사용하면 템플릿 조각이 현재 태그(div)를 대체한다.

 

실행 결과

<h2>부분 포함 replace</h2>
<footer>
푸터 자리 입니다.
</footer>

 

(3) 부분 포함 단순 표현식

<div th:replace="template/fragment/footer :: copy"></div>

~{...}를 사용하는 것이 원칙이지만 템플릿 조각을 사용하는 코드가 단순하면 이 부분을 생략할 수 있다.

 

실행 결과

<h2>부분 포함 단순 표현식</h2>
<footer>
푸터 자리 입니다.
</footer>

 

(4) 파라미터 사용

 <div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>

파라미터를 전달해서 동작으로 조각을 렌더링 할 수도 있다.

 

실행 결과

<h1>파라미터 사용</h1>
<footer>
<p>파라미터 자리 입니다.</p>
<p>데이터1</p>
<p>데이터2</p>
</footer>

 

footer.html 의 copyParam 부분

<footer th:fragment="copyParam (param1, param2)">
    <p>파라미터 자리 입니다.</p>
    <p th:text="${param1}"></p>
    <p th:text="${param2}"></p>
</footer>

 

실행 결과 화면

스크린샷 2022-01-21 오후 4 26 49 스크린샷 2022-01-21 오후 4 27 17

 

📚 7. 템플릿 레이아웃 1

  • 이전에는 일부 코드 조각을 가지고와서 사용했다면, 이번에는 개념을 더 확장해서 코드 조각을 레이아웃에 넘겨서 사용하는 방법에 대해서 알아보자.
  • 예를 들어서 <head> 에 공통으로 사용하는 css , javascript 같은 정보들이 있는데, 이러한 공통 정보들을 한 곳에 모아두고, 공통으로 사용하지만, 각 페이지마다 필요한 정보를 더 추가해서 사용하고 싶다면 다음과 같이 사용하면 된다.

 

TemplateController에 추가

    @GetMapping("layout")
    public String layout(){
        return "template/layout/layoutMain";
    }

 

/resources/templates/template/layout/base.html

<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>

 

/resources/templates/template/layout/layoutMain.html

<!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>

common_header(~{::title},~{::link}) 이 부분이 핵심이다.
➡️ ::title 은 현재 페이지의 title 태그들을 전달한다.
➡️ ::link 는 현재 페이지의 link 태그들을 전달한다.

 

실행 결과
스크린샷 2022-01-23 오후 12 48 29

 

결과를 보면

  • 메인 타이틀이 전달한 부분으로 교체되었다.
  • 공통 부분은 그대로 유지되고, 추가 부분에 전달한 <link> 들이 포함되었다.
  • 레이아웃 개념을 두고, 그 레이아웃에 필요한 코드 조각을 전달해서 완성하는 것으로 이해하면 된다.

 

📚 8. 템플릿 레이아웃 2

템플릿 레이아웃 확장

  • 템플릿 레이아웃 1에서는 <head> 부분만 적용했지만, <html> 전체에 적용할 수도 있다.

 

TemplateController에 추가

    @GetMapping("/layoutExtend")
    public String layoutExtend(){
        return "template/layoutExtend/layoutExtendMain";
    }

 

/resources/templates/template/layoutExtend/layoutFile.html

<!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>

 

/resources/templates/template/layoutExtend/layoutExtendMain.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>

 

실행 결과
스크린샷 2022-01-21 오후 6 03 26

스크린샷 2022-01-21 오후 6 03 20
  • layoutFile.html 을 보면 기본 레이아웃을 가지고 있는데, <html> 에 th:fragment 속성이 정의되어 있다.
  • layoutFile.html을 기본으로 하고 여기에 필요한 내용을 전달해서 부분적으로 변경하는 것으로 이해하면 된다.

 

  • layoutExtendMain.html 는 현재 페이지인데, <html> 자체를 th:replace 를 사용해서 변경하는 것을 확인할 수 있다.
  • 결국 layoutFile.html 에 필요한 내용을 전달하면서 <html> 자체를 layoutFile.html 로 변경한다.

 

참고

profile
LeeKyoungChang
"야, (오류 만났어?) 너두 (해결) 할 수 있어"
이전 포스트

타임리프 - 기본 기능

다음 포스트

타임리프 - 스프링 통합과 폼

0개의 댓글