타임리프 정리

9 minute read

타임 리프

특징
- 서버 사이드 HTML 렌더링(SSR)
- 네츄럴 템플릿(순수 HTML을 유지하면서 뷰 템플릿도 사용할 수 있는 특징)
- 스프링 통합 지원

타임 리프 사용 선언

<html xmlns:th="http://www.thymeleaf.org">

텍스트 -text, utext

<ul>
 <li>th:text 사용 <span th:text="${data}"></span></li>
 <li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>
</ul>

타임리프 태그에 있는 데이터는 ${data}로 표현한다.
타임리프 태그 밖에서는 [[${data}]]로 표현 가능

변수 - SpringEL

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<h1>SpringEL 표현식</h1>
<ul>Object
  <li>${user.username} = <span th:text="${user.username}"></span></li>
  <li>${user['username']} = <span th:text="${user['username']}"></span></li>
  <li>${user.getUsername()} = <span >[[${user.username}]]</span></li>
</ul>
<ul>List
  <li>${users[0].username} = <span th:text="${users[0].username}"><span></li>
  <li>${users[0]['username']} = <span th:text="${users[0]['username']}"></span></li>
  <li>${users[0].getUsername()} = <span th:text="${users[0].getUsername()}"></span></li>
</ul>
<ul>Map
  <li>${userMap['userA'].username} = <span th:text="${userMap['userA'].username}"></span></li>
  <li>${userMap['userA']['username']} = <span th:text="${userMap['userA']['username']}"></span></li>
  <li>${userMap['userA'].getUsername()} = <span th:text="${userMap['userA'].getUsername()}"></span></li>
</ul>
</body>
</html>

Object
- user.username : user의 username을 프로퍼티 접근 -> user.getUsername()
- user[‘username’] : 위와 같음
- user.getUsername() : user의 getUsername()을 호출
List
- users[0].username : List에서 첫 번째 회원을 찾고 username 프로퍼티 접근 -> list.get(0).getUsername()
- users[0][‘username’] : 위와 같음
- users[0].getUsername() : List에서 첫 번째 회원을 찾고 메서드 직접 호출
Map
- userMap[‘userA’].username : Map에서 userA를 찾고, username 프로퍼티 접근 -> map.get(“userA”).getUsername()
- userMap[‘userA’][‘username’] : 위와 같음
- userMap[‘userA’].getUsername() : Map에서 userA를 찾고 메서드 직접 호출

지역변수

th:with 를 사용하면 지역 변수를 선언해서 사용할 수 있다. 지역 변수는 선언한 테그 안에서만 사용할 수 있다.

<h1>지역 변수 - (th:with)</h1>
<div th:with="first=${users[0]}">
    <p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>
</div>

기본 객체들

타임리프는 밑에와 같은 객체들을 제공한다.

${#request}
${#response}
${#session}
${#servletContext}
${#locale}

그런데 #request 는 HttpServletRequest 객체가 그대로 제공되기 때문에 데이터를 조회하려면 request.getParameter(“data”) 처럼 불편하게 접근해야 하지만 편의 객체를 제공한다.

편의 객체
- HTTP 요청 파라미터 접근: param
  - ${param.paramData}
- HTTP 세션 접근: session
  - ${session.sessionData}
- 스프링 빈 접근: @
  - ${@helloBean.hello(‘Spring!’)

@Component("helloBean")
static class HelloBean {
    public String hello(String data) {
    return "Hello " + data;
    }
}

URL 링크

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>URL 링크</h1>
<ul>
    <li><a th:href="@{/hello}">basic url</a></li>
    <li><a th:href="@{/hello(param1=${param1}, param2=${param2})}">hello query
        param</a></li>
    <li><a th:href="@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}">path variable</a></li>
    <li><a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}">path variable + query parameter</a></li>
</ul>
</body>
</html>

단순한 URL
- @{/hello} /hello
쿼리 파라미터
- @{/hello(param1=${param1}, param2=${param2})}
  - /hello?param1=data1&param2=data2
  - () 에 있는 부분은 쿼리 파라미터로 처리된다.
경로 변수
- @{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}
  - /hello/data1/data2
  - URL 경로상에 변수가 있으면 () 부분은 경로 변수로 처리된다.
경로 변수 + 쿼리 파라미터
- @{/hello/{param1}(param1=${param1}, param2=${param2})}
  - /hello/data1?param2=data2
  - 경로 변수와 쿼리 파라미터를 함께 사용할 수 있다.
상대경로, 절대경로, 프로토콜 기준을 표현할 수 도 있다.
- /hello : 절대 경로
- hello : 상대 경로

리터럴

리터럴은 소스 코드상에 고정된 값을 말한다.
타임리프는 다음과 같은 리터럴이 있다.
- 문자: ‘hello’
- 숫자: 10
- 불린: true , false
- null: null
타임리프에서 문자 리터럴은 항상 ‘ (작은 따옴표)로 감싸야 한다.
- <span th:text="'hello'">
문자가 쭉 이어진다면 리터럴 생략가능
- <span th:text="hello">
- <span th:text="hello world!"></span> 에러 발생

<ul>
    <!--주의! 다음 주석을 풀면 예외가 발생함-->
    <!-- <li>"hello world!" = <span th:text="hello world!"></span></li>-->
    <li>'hello' + ' world!' = <span th:text="'hello' + ' world!'"></span></li>
    <li>'hello world!' = <span th:text="'hello world!'"></span></li>
    <li>'hello ' + ${data} = <span th:text="'hello ' + ${data}"></span></li>
    <li>리터럴 대체 |hello ${data}| = <span th:text="|hello ${data}|"></span></li>
</ul>

리터럴 대체(Literal substitutions)
- <span th:text="|hello ${data}|">

연산

<!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 &gt; 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 의 내용 그대로 활용할 수 있다. 마지막 예를 보면 데이터가 없습니다. 부분이 그대로 출력된다.

속성 값 설정

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>속성 설정</h1>
<input type="text" name="mock" th:name="userA" />
<h1>속성 추가</h1>
- th:attrappend = <input type="text" class="text" th:attrappend="class='large'" /><br/>
- th:attrprepend = <input type="text" class="text" th:attrprepend="class='large '" /><br/>
- th:classappend = <input type="text" class="text" th:classappend="large" / ><br/>
<h1>checked 처리</h1>
- checked o <input type="checkbox" name="active" th:checked="true" /><br/>
- checked x <input type="checkbox" name="active" th:checked="false" /><br/>
- checked=false <input type="checkbox" name="active" checked="false" /><br/>
</body>
</html>

속성 설정
- th:* 속성을 지정하면 타임리프는 기존 속성을 th:* 로 지정한 속성으로 대체한다. 기존 속성이 없다면 새로 만든다.
- <input type="text" name="mock" th:name="userA" /> -> 타임리프 렌더링 후 <input type="text" name="userA" />
속성 추가
- th:attrappend : 속성 값의 뒤에 값을 추가한다.
- th:attrprepend : 속성 값의 앞에 값을 추가한다.
- th:classappend : class 속성에 자연스럽게 추가한다.
checked 처리
- HTML에서는 <input type="checkbox" name="active" checked="false" /> 이 경우에도 checked 속성이 있기 때문에 checked 처리가 되어버린다.
- HTML에서 checked 속성은 checked 속성의 값과 상관없이 checked 라는 속성만 있어도 체크가 된다. 이런 부분이 true , false 값을 주로 사용하는 개발자 입장에서는 불편하다.
- 타임리프의 th:checked 는 값이 false 인 경우 checked 속성 자체를 제거한다.
  - <input type="checkbox" name="active" th:checked="false" />
  - 타임리프 렌더링 후: <input type="checkbox" name="active" />

반복

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

반복 기능
- <tr th:each="user : ${users}">
- 반복시 오른쪽 컬렉션( ${users} )의 값을 하나씩 꺼내서 왼쪽 변수( user )에 담아서 태그를 반복 실행합니다.
- th:each 는 List 뿐만 아니라 배열, java.util.Iterable , java.util.Enumeration 을 구현한 모든 객체를 반복에 사용할 수 있습니다. Map 도 사용할 수 있는데 이 경우 변수에 담기는 값은 Map.Entry입니다.
반복 상태 유지
- <tr th:each="user, userStat : ${users}">
- 반복의 두번째 파라미터를 설정해서 반복의 상태를 확인 할 수 있습니다.
- 두번째 파라미터는 생략 가능한데, 생략하면 지정한 변수명( user ) + Stat 가 됩니다. 여기서는 user + Stat = userStat 이므로 생략 가능합니다.
반복 상태 유지 기능
- index : 0부터 시작하는 값
- count : 1부터 시작하는 값
- size : 전체 사이즈
- even , odd : 홀수, 짝수 여부( boolean )
- first , last :처음, 마지막 여부( boolean )
- current : 현재 객체

조건부 평가

<span th:text="'미성년자'" th:if="${user.age lt 20}"></span>
<span th:text="'미성년자'" th:unless="${user.age ge 20}"></span>

if, unless
- 타임리프는 해당 조건이 맞지 않으면 태그 자체를 렌더링하지 않는다.
- 만약 다음 조건이 false 인 경우 … 부분 자체가 렌더링 되지 않고 사라진다.
- <span th:text="'미성년자'" th:if="${user.age lt 20}"></span>
switch
- *은 만족하는 조건이 없을 때 사용하는 디폴트이다.

블록

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

-> 타임리프의 특성상 태그안에서만 정의해서 사용할 수 있지만 block을 사용하여 다른 태그에서도 접근 가능

자바스크립트 인라인

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

결과

<script>
var username = userA;
var age = 10;
//자바스크립트 내추럴 템플릿
var username2 = /*userA*/ "test username";
//객체
var user = BasicController.User(username=userA, age=10);
</script>

자바스크립트 인라인 사용 후 - 결과

<script>
var username = "userA";
var age = 10;
//자바스크립트 내추럴 템플릿
var username2 = "userA";
//객체
var user = {"username":"userA","age":10};
</script>

텍스트 렌더링
- var username = [[${user.username}]];
  - 인라인 사용 전 var username = userA;
  - 인라인 사용 후 var username = “userA”;
자바스크립트 내추럴 템플릿
- var username2 = /[[${user.username}]]/ “test username”;
  - 인라인 사용 전 var username2 = /userA/ “test username”;
  - 인라인 사용 후 var username2 = “userA”;
객체
- var user = [[${user}]];
  - 인라인 사용 전 var user = BasicController.User(username=userA, age=10);
  - 인라인 사용 후 var user = {“username”:”userA”,”age”:10}

자바스크립트 인라인 each

<script th:inline="javascript">
 [# th:each="user, stat : ${users}"]
 var user[[${stat.count}]] = [[${user}]];
 [/]
</script>

템플릿 조각

웹 페이지를 개발할 때는 공통 영역이 많이 있는데 이걸 해겨해 준다.

footer 예시

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

fragment 메인

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

template/fragment/footer :: copy : template/fragment/footer.html 템플릿에 있는 th:fragment=”copy” 라는 부분을 템플릿 조각으로 가져와서 사용한다는 의미이다.
부분 포함 insert
- th:insert 를 사용하면 현재 태그( div ) 내부에 추가한다
부분 포함 replace
- th:replace 를 사용하면 현재 태그( div )를 대체한다.

속성 변경 - th:href

th:href=”@{/css/bootstrap.min.css}”
href=”value1” 을 th:href=”value2” 의 값으로 변경한다.
타임리프 뷰 템플릿을 거치게 되면 원래 값을 th:xxx 값으로 변경한다. 만약 값이 없다면 새로 생성한다.
HTML을 그대로 볼 때는 href 속성이 사용되고, 뷰 템플릿을 거치면 th:href 의 값이 href 로 대체되면서 동적으로 변경할 수 있다

핵심

핵심은 th:xxx 가 붙은 부분은 서버사이드에서 렌더링 되고, 기존 것을 대체한다. th:xxx 이 없으면 기존 html의 xxx 속성이 그대로 사용된다.
HTML을 파일로 직접 열었을 때, th:xxx 가 있어도 웹 브라우저는 th: 속성을 알지 못하므로 무시한다. 따라서 HTML을 파일 보기를 유지하면서 템플릿 기능도 할 수 있다.

URL 링크 표현식 - @{…}

th:href=”@{/css/bootstrap.min.css}”
@{…} : 타임리프는 URL 링크를 사용하는 경우 @{…} 를 사용한다. 이것을 URL 링크 표현식이라 한다.
URL 링크 표현식을 사용하면 서블릿 컨텍스트를 자동으로 포함한다.

URL 링크 표현식2 - @{…},

th:href=”@{/basic/items/{itemId}(itemId=${item.id})}”
상품 ID를 선택하는 링크를 확인해보자.
URL 링크 표현식을 사용하면 경로를 템플릿처럼 편리하게 사용할 수 있다.
경로 변수( {itemId} ) 뿐만 아니라 쿼리 파라미터도 생성한다.
예) th:href=”@{/basic/items/{itemId}(itemId=${item.id}, query=’test’)}”
- 생성 링크: http://localhost:8080/basic/items/1?query=test

URL 링크 간단히

th:href=”@{ /basic/items/${item.id} }”
상품 이름을 선택하는 링크를 확인해보자.
리터럴 대체 문법을 활용해서 간단히 사용할 수도 있다.

속성 변경 - th:onclick

onclick=”location.href=’addForm.html’”
th:onclick=” location.href=’@{/basic/items/add}’ ”

리터럴 대체 - |…|

타임리프에서 문자와 표현식 등은 분리되어 있기 때문에 더해서 사용해야 한다.
- ```
  <span th:text="'Welcome to our application, ' + ${user.name} + '!'">
```
다음과 같이 리터럴 대체 문법을 사용하면, 더하기 없이 편리하게 사용할 수 있다.
- ```
  <span th:text="|Welcome to our application, ${user.name}!|">
```
결과를 다음과 같이 만들어야 하는데
- location.href=’/basic/items/add’
그냥 사용하면 문자와 표현식을 각각 따로 더해서 사용해야 하므로 다음과 같이 복잡해진다.
- th:onclick=”‘location.href=’ + ‘'’ + @{/basic/items/add} + ‘'’”
리터럴 대체 문법을 사용하면 다음과 같이 편리하게 사용할 수 있다.
- th:onclick=” location.href=’@{/basic/items/add}’ ”

속성 변경 - th:action

HTML form에서 action 에 값이 없으면 현재 URL에 데이터를 전송한다.
상품 등록 폼의 URL과 실제 상품 등록을 처리하는 URL을 똑같이 맞추고 HTTP 메서드로 두 기능을 구분한다.
- 상품 등록 폼: GET /basic/items/add
- 상품 등록 처리: POST /basic/items/add
이렇게 하면 하나의 URL로 등록 폼과, 등록 처리를 깔끔하게 처리할 수 있다.
취소
- 취소시 상품 목록으로 이동한다.
- th:onclick=” location.href=’@{/basic/items}’ ”

RedirectAttributes

    @PostMapping("/add")
    public String addItemV3(@ModelAttribute("item") Item item, RedirectAttributes redirectAttributes){
        Item saveditem = itemRepository.save(item);
        redirectAttributes.addAttribute("itemId",saveditem.getItemName());
        redirectAttributes.addAttribute("status",true);
        return "redirect:/basic/items/{itemId}";
    }

pathVariable 바인딩: {itemId}
나머지는 쿼리 파라미터로 처리: ?status=true
- 전달된 파라미터로 처리 가능

출처 - 김영한의 스프링 MVC 1편

Share on

Twitter Facebook LinkedIn

Lee ChangMin