SpringBoot/스프링 MVC 1편-백엔드 웹 개발 핵심 기술

1. 타임리프- 기본기능(2)

퓨처디벨로퍼 2022. 8. 6. 21:58

목차

9. 속성 값 설정
10. 반복
11. 조건부 평가
12. 주석
13. 블록
14. 자바스크립트 인라인
15. 템플릿 조각
16. 템플릿 레이아웃1
17. 템플릿 레이아웃2

9. 속성 값 설정

타임리프 태그 속성(Attribute)/ 속성 설정

  • HTML 태그에 th:* 속성을 지정하는 방식. th:* 로 속성을 적용하면 기존 속성을 대체하고, 없으면 새로 만든다.
  • [기존 속성 대체]
    타임리프 렌더링 전: <input type="text" name="mock" th:name="userA" />
    타임리프 렌더링 후: <input type="text" name="userA" />

속성 추가

  • th:attrappend : 속성 값의 뒤에 값을 추가한다.
  • th:attrprepend : 속성 값의 앞에 값을 추가한다.
  • th:classappend : class 속성에 자연스럽게 추가한다.
- 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/>

checked 처리

1. checked o <input type="checkbox" name="active" th:checked="true" /><br/>
2. checked x <input type="checkbox" name="active" th:checked="false" /><br/>
3. checked=false <input type="checkbox" name="active" checked="false" /><br/>

결과

1번: th:checked="true"
2번: th:checked 는 값이 false 인 경우 checked 속성 자체를 제거한다.
3번: HTML에서 checked 속성은 checked 속성의 값과 상관없이 checked 라는 속성만 있어도 체크가 된다.

10. 반복(th:each)

반복 기능

<tr th:each="user : ${users}">
 <td th:text="${user.username}">username</td>
 <td th:text="${user.age}">0</td>
 </tr>

반복 상태 유지

  • 반복의 두번째 파라미터를 설정해서 반복 상태를 확인할 수 있다.
  • 두번째 파라미터는 생량이 가능한데, 생략하면 지정한 변수명(user)+Stat가 된다.
  • <tr th:each="user, userStat : ${users}"> <td th:text="${userStat.count}">username</td> ...
  • 반복 상태 유지 기능
  • index : 0부터 시작하는 값 count : 1부터 시작하는 값 size : 전체 사이즈 even , odd : 홀수, 짝수 여부( boolean ) first , last :처음, 마지막 여부( boolean ) current : 현재 객체

11. 조건부 평가(if, switch)

if, unless

<span th:text="'미성년자'" th:if="${user.age lt 20}"></span>
<span th:text="'미성년자'" th:unless="${user.age ge 20}"></span>
  • 조건에 맞지 않으면 태그 자체를 렌더링하지 않는다.

switch

<td th:switch="${user.age}">
 <span th:case="10">10살</span>
 <span th:case="20">20살</span>
 <span th:case="*">기타</span>
 </td>
  • * 은 만족하는 조건이 없을 때 사용하는 디폴트이다.

12. 주석

<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>
/*/-->
  • 실행결과(타임리프 렌더링)
<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 주석: 타임리프가 렌더링 하지 않고, 그대로 남겨둔다.
  2. 타임리프 파서 주석: 타임리프의 진짜 주석. 렌더링에서 주석 부분을 제거한다.
  3. 타임리프 프로토타입 주석:HTML 주석에 약간의 구문을 더했다. HTML 파일을 웹 브라우저에서 그대로 열어보면 HTML 주석이기 때문에 이 부분이 웹 브라우저가 렌더링하지 않는다.타임리프 렌더링을 거치면 이 부분이 정상 렌더링 된다.

13. 블록

  • th:block 은 HTML 태그가 아닌 타임리프의 유일한 자체 태그다.
  • 타임리프의 특성상 HTML 태그안에 속성으로 기능을 정의해서 사용하는데, 아래 예처럼 사용하기 애매한 경우에 사용한다. th:block 은 렌더링시 제거된다.
  • <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>
  • 결과
  • <div> 사용자 이름1 <span>userA</span> 사용자 나이1 <span>10</span> </div> <div> 요약 <span>userA / 10</span> </div> <div> 사용자 이름1 <span>userB</span> 사용자 나이1 <span>20</span> </div> <div> 요약 <span>userB / 20</span> </div>

14. 자바스크립트 인라인

  • 타임리프는 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다.
<!-- 자바스크립트 인라인 사용 전 -->
<script>
 var username = [[${user.username}]];
 var age = [[${user.age}]];
 //자바스크립트 내추럴 템플릿
 var username2 = /*[[${user.username}]]*/ "test username";
 //객체
 var user = [[${user}]];
</script>
  • 결과 
    <script>
var username = userA;
var age = 10;
//자바스크립트 내추럴 템플릿
var username2 = /*userA*/ "test username";
//객체
var user = BasicController.User(username=userA, age=10);
</script>
<!-- 자바스크립트 인라인 사용 후 -->
<script th:inline="javascript">
 var username = [[${user.username}]];
 var age = [[${user.age}]];
 //자바스크립트 내추럴 템플릿
 var username2 = /*[[${user.username}]]*/ "test username";
 //객체
 var user = [[${user}]];
</script>
  • 결과 
    <script>
var username = "userA";
var age = 10;
//자바스크립트 내추럴 템플릿
var username2 = "userA";
//객체
var user = {"username":"userA","age":10};
</script>
  • 결과사용 후 장점
  • 텍스트 렌더링: 문자 타입인 경우 " 를 포함해준다. 추가로 자바스크립트에서 문제가 될 수 있는 문자가 포함되어있으면 이스케이프 처리도 해준다. 예) " => "
  • 자바스크립트 내추럴 템플릿: 타임리프는 HTML 파일을 직접 열어도 동작하는 내추럴 템플릿 기능을 제공한다. 자바스크립트 인라인 기능을 사용하면 주석을 활용해서 이 기능을 사용할 수 있다.
  • 객체

자바스크립트 인라인 each

<script th:inline="javascript">
 [# th:each="user, stat : ${users}"]
 var user[[${stat.count}]] = [[${user}]];
 [/]
</script>
  • 결과
  • <script> var user1 = {"username":"userA","age":10}; var user2 = {"username":"userB","age":20}; var user3 = {"username":"userC","age":30}; </script>

15. 템플릿 조각(th:fragment)

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

조각 사용

  • 일부 코드 조각을 가져오는 방법
<footer th:fragment="copy">
 푸터 자리 입니다.
</footer>
<footer th:fragment="copyParam (param1, param2)">
 <p>파라미터 자리 입니다.</p>
 <p th:text="${param1}"></p>
 <p th:text="${param2}"></p>
</footer>
  • th:fragment: 다른 곳에 포함되는 코드 조각
<h2>1. 부분 포함 insert</h2>
<div th:insert="~{template/fragment/footer :: copy}"></div>
<h2>2. 부분 포함 replace</h2>
<div th:replace="~{template/fragment/footer :: copy}"></div>
<h2>3. 부분 포함 단순 표현식</h2>
<div th:replace="template/fragment/footer :: copy"></div>
<h1>4. 파라미터 사용</h1>
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터
2')}"></div>
  1. th:insert: 현재 태그( div ) 내부에 추가한다.
  2. th:replace: 현재 태그( div )를 대체한다.
  3. 단순 표현식: ~{...} 를 사용하는 것이 원칙이지만 템플릿 조각을 사용하는 코드가 단순하면 이 부분을 생략할 수 있다.
  4. 파라미터 사용: 파라미터를 전달해서 동적으로 조각을 렌더링 할 수도 있다.

16. 템플릿 레이아웃1(th:fragment)

  • 코드 조각을 레이아웃에 넘겨서 사용하는 방법

기본 레이아웃

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

넘긴 코드조각

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

결과

<head>
<title>메인 타이틀</title>
<!-- 공통 -->
<link rel="stylesheet" type="text/css" media="all" href="/css/awesomeapp.css">
<link rel="shortcut icon" href="/images/favicon.ico">
<script type="text/javascript" src="/sh/scripts/codebase.js"></script>
<!-- 추가 -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/themes/smoothness/jquery-ui.css">
</head>
  • ::title 은 현재 페이지의 title 태그들을 전달한다.
    ::link 는 현재 페이지의 link 태그들을 전달한다

17. 템플릿 레이아웃2(th:fragment)

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

넘긴 코드조각

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

결과

<!DOCTYPE html>
<html>
<head>
<title>메인 페이지 타이틀</title>
</head>
<body>
<h1>레이아웃 H1</h1>
<section>
<p>메인 페이지 컨텐츠</p>
<div>메인 페이지 포함 내용</div>
</section>
<footer>
레이아웃 푸터
</footer>
</body>
</html>