Spring MVC v2 - 타임리프 기본기능

Kwon Yongho·2023년 4월 24일
spring mvc
0

Spring-MVC-v2

목록 보기
1/13
post-thumbnail

Spring MVC - 타임리프 기본기능

  1. 타임리프 - 타임리프 소개
  2. 타임리프 기능

1. 타임리프 - 타임리프 소개

공식 사이트: https://www.thymeleaf.org/

타임리프 특징

  1. 서버 사이드 HTML 렌더링 (SSR)
  • 타임리프는 백엔드 서버에서 HTML을 동적으로 렌더링 하는 용도로 사용된다.
  1. 네츄럴 템플릿
  • 타임리프는 순수 HTML을 최대한 유지하는 특징
  • 타임리프로 작성한 파일은 HTML을 유지하기 때문에 웹 브라우저에서 파일을 직접 열어도 내용을 확인할 수 있고, 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있다.
  • 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 네츄럴 템플릿(natural templates)이라 한다.
  1. 스프링 통합 지원
  • 타임리프는 스프링과 자연스럽게 통합되고, 스프링의 다양한 기능을 편리하게 사용할 수 있게 지원한다.

2. 타임리프 기능

2-1. 텍스트 - text, utext

  • 타임리프의 가장 기본 기능인 텍스트를 출력하는 기능
  • th:text 를 사용하면 된다.
    <li>th:text 사용 <span th:text="${data}"></span></li>
    <li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>

Escape

  • HTML 문서는 < , > 같은 특수 문자를 기반으로 정의된다. 따라서 뷰 템플릿으로 HTML 화면을 생성할 때는 출력하는 데이터에 이러한 특수 문자가 있는 것을 주의해서 사용해야 한다.

HTML 엔티티

  • 웹 브라우저는 < 를 HTML 테그의 시작으로 인식한다. 따라서 < 를 테그의 시작이 아니라 문자로 표현할 수 있는 방법이 필요한데, 이것을 HTML 엔티티라 한다.
  • HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것을 이스케이프(escape)라 한다.
  • 타임리프가 제공하는 th:text, [[...]] 는 기본적으로 이스케이스(escape)를 제공한다.

이스케이프 기능을 사용하지 않으려면?

  • th:text -> th:utext
  • [[...]] -> [(...)]

2-2. 변수 - 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 th:text="${user.getUsername()}"></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>

SpringEL 다양한 표현식 사용

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

2-3. 기본 객체들

  • ${#request} - 스프링 부트 3.0부터 제공하지 않는다.
  • ${#response} - 스프링 부트 3.0부터 제공하지 않는다.
  • ${#session} - 스프링 부트 3.0부터 제공하지 않는다.
  • ${#servletContext} - 스프링 부트 3.0부터 제공하지 않는다.
  • ${#locale}

스프링 부트 3.0이라면 직접 model 에 해당 객체를 추가해서 사용해야 한다.

        session.setAttribute("sessionData", "Hello Session");
        model.addAttribute("request", request);
        model.addAttribute("response", response);
        model.addAttribute("servletContext", request.getServletContext());

2-4. 유틸리티 객체와 날짜

타임리프 유틸리티 객체들

  • #message : 메시지, 국제화 처리
  • #uris : URI 이스케이프 지원
  • #dates : java.util.Date 서식 지원
  • #calendars : java.util.Calendar 서식 지원
  • #temporals : 자바8 날짜 서식 지원
  • #numbers : 숫자 서식 지원
  • #strings : 문자 관련 편의 기능
  • #objects : 객체 관련 기능 제공
  • #bools : boolean 관련 기능 제공
  • #arrays : 배열 관련 기능 제공
  • #lists , #sets , #maps : 컬렉션 관련 기능 제공

공식 홈페이지 소개

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#expression-utilityobject

2-5. URL 링크

  • 타임리프에서 URL을 생성할 때는 @{...} 문법을 사용하면 된다.
<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>

1. 단순한 URL

  • @{/hello} -> /hello

2. 쿼리 파라미터

  • @{/hello(param1=param1,param2={param1}, param2={param2})} -> /hello?param1=data1¶m2=data2

3. 경로 변수

  • @{/hello/{param1}/{param2}(param1=param1,param2={param1}, param2={param2})} -> /hello/data1/data2

4. 경로 변수 + 쿼리 파라미터

  • @{/hello/{param1}(param1=param1,param2={param1}, param2={param2})} -> /hello/data1?param2=data2

2-6. 리터럴

  • 리터럴은 소스 코드상에 고정된 값을 말하는 용어이다.

타임리프는 다음과 같은 리터럴이 있다.

  • 문자: 'hello'
  • 숫자: 10
  • 불린: true , false
  • null: null

규칙

  • 타임리프에서 문자 리터럴은 항상 ' (작은 따옴표)로 감싸야 한다.
  • <span th:text="'hello'">
  • . 공백 없이 쭉 이어진다면 하나의 의미있는 토큰으로 인지해서 다음과 같이 작은 따옴표를 생략할 수 있다.
  • <span th:text="hello">

오류

  • <span th:text="hello world!"></span>
  • 문자 리터럴은 원칙상 ' 로 감싸야 한다. 중간에 공백이 있어서 하나의 의미있는 토큰으로도 인식되지 않는다.
  • 수정: <span th:text="'hello world!'"></span>

리터럴 대체(Literal substitutions)

  • <span th:text="|hello ${data}|">
    <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>

2-7. 연산

  • 타임리프 연산은 자바와 크게 다르지 않다.
  • HTML안에서 사용하기 때문에 HTML 엔티티를 사용하는 부분만 주의하자.

  • No-Operation: : _ 인 경우 마치 타임리프가 실행되지 않는 것 처럼 동작한다. 이것을 잘 사용하면 HTML의 내용 그대로 활용할 수 있다.

2-8. 속성 값 설정

  • 타임리프는 주로 HTML 태그에 th:* 속성을 지정하는 방식으로 동작한다.
<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/>

속성 추가

  • th:attrappend : 속성 값의 뒤에 값을 추가한다.
  • th:attrprepend : 속성 값의 앞에 값을 추가한다.
  • th:classappend : class 속성에 자연스럽게 추가한다.

checked 처리

  • HTML에서는 <input type="checkbox" name="active" checked="false" /> 이 경우에도 checked 속성이 있기 때문에 checked 처리가 되어버린다.
  • 타임리프의 th:checked 는 값이 false 인 경우 checked 속성 자체를 제거한다.
  • <input type="checkbox" name="active" th:checked="false" /> 랜더링하면 <input type="checkbox" name="active" />가 됨

2-9. 반복

  • 타임리프에서 반복은 th:each 를 사용한다. 추가로 반복에서 사용할 수 있는 여러 상태 값을 지원한다.
        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);
<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>

반복 기능

  • <tr th:each="user : ${users}"> 반복시 오른쪽 컬렉션( ${users} )의 값을 하나씩 꺼내서 왼쪽 변수(user)에 담아서 태그를 반복 실행

반복 상태 유지

  • <tr th:each="user, userStat : ${users}"> 반복의 두번째 파라미터를 설정해서 반복의 상태를 확인 할 수 있습니다.

반복 상태 유지 기능

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

2-10. 타임리프 - 조건부 평가

  • if, unless (if 의 반대)

반복에서의 addUser 그대로 사용

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

if, unless

  • 만약 다음 조건이 false 인 경우 <span>...<span> 부분 자체가 렌더링 되지 않고 사라진다.

2-11. 주석

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

1. 표준 HTML 주석

  • 자바스크립트의 표준 HTML 주석은 타임리프가 렌더링 하지 않고, 그대로 남겨둔다.

2. 타임리프 파서 주석

  • 타임리프 파서 주석은 타임리프의 진짜 주석이다. 렌더링에서 주석 부분을 제거한다.

3. 타임리프 프로토타입 주석

  • HTML 파일을 그대로 열어보면 주석처리가 되지만, 타임리프를 렌더링 한 경우에만 보이는 기능이다.

2-12. 블록

  • <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>
</body>

  • each만으로 해결하기 어려울때. 블록 단위로 쓰고 싶을때 사용

2-13. 자바스크립트 인라인

  • 타임리프는 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다.
<!-- 자바스크립트 인라인 사용 전 -->
<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>

적용
<script th:inline="javascript">

텍스트 렌더링

  • 인라인 사용 전 var username = userA;
  • 인라인 사용 후 var username = "userA";

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

  • 인라인 사용 전 var username2 = /userA/ "test username";
  • 인라인 사용 후 var username2 = "userA";
  • 인라인 사용 전 결과를 보면 정말 순수하게 그대로 해석을 해버렸다.
  • 인라인 사용 후 결과를 보면 주석 부분이 제거되고, 기대한 "userA"가 정확하게 적용된다.

객체

  • 인라인 사용 전 var user = BasicController.User(username=userA, age=10);
  • 인라인 사용 후 var user = {"username":"userA","age":10};
  • 인라인 사용 전은 객체의 toString()이 호출된 값이다.
  • 인라인 사용 후는 객체를 JSON으로 변환해준다.

2-14. 템플릿 조각

  • 웹 페이지를 개발할 때는 공통 영역이 많이 있다(Header,footer,catagory 등등)
  • 타임리프는 이런 문제를 해결하기 위해 템플릿 조각과
    레이아웃 기능을 지원한다.

fragmentMain.html

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

footer.html

<body>

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

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

</body>
  • th:fragment 가 있는 태그는 다른곳에 포함되는 코드 조각으로 이해하면 된다.
  • template/fragment/footer :: copy -> template/fragment/footer.html 템플릿에 있는 th:fragment="copy" 라는 부분을 템플릿 조각으로 가져와서 사용한다는 의미

부분 포함

  • insert: th:insert 를 사용하면 현재 태그( div ) 내부에 추가한다.
  • replace: th:replace 를 사용하면 현재 태그( div )를 대체한다.
  • ~{...} 를 사용하는 것이 원칙이지만 템플릿 조각을 사용하는 코드가 단순하면 이 부분을 생략할 수 있다.
  • 파라미터를 추가해서 동적으로도 이용 할 수 있다.

2-15. 템플릿 레이아웃

-<head> 에 공통으로 사용하는 css , javascript 같은 정보들이 있는데, 이러한 공통 정보들을 한 곳에 모아두고, 공통으로 사용하지만, 각 페이지마다 필요한 정보를 더 추가해서 사용하고 싶다면 다음과 같이 사용하면 된다.

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>

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>

  • title은 메인의 페이지를 가져와서 바뀌고(replace)
  • section도 가져와서 통으로 바뀌었다.
  • footer와 h1태그는 원래 있던 것이 출력되었다.

참고
김영한: 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술(인프런)
Github - https://github.com/b2b2004/Spring_MVC

profile
Kwon Yongho
공책
다음 포스트

Spring MVC v2 - 스프링 통합과 폼

0개의 댓글