타임리프

타임리프 특징

- 서버 사이드  HTML 렌더링

- 네츄럴 템플릿

- 스프링 통합 지원

 

텍스트

- HTML 태그의 속성이 아닌 HTML 콘텐츠 영역 안에서 직접 데이터를 출력하고 싶으면 [[...]] 을 사용하면 된다.

 

변수 -> ${...}

SpringEL 다양한 표현식 사용
Object
user.username : user의 username을 프로퍼티 접근 user.getUsername()
user['username'] : 위와 같음 user.getUsername()
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를 찾고 메서드 직접 호출

 

기본 객체들

타임리프는 기본 객체들을 제공한다.
-  ${#request}
- ${#response}
- ${#session}
- ${#servletContext}
- ${#locale}

HTTP 요청 파라미터 접근: param
예) ${param.paramData}HTTP 세션 접근: session
예) ${session.sessionData}
스프링 빈 접근: @
예) ${@helloBean.hello('Spring!')}

 

유틸리티 객체와 날짜

타임리프 유틸리티 객체들
- #message : 메시지, 국제화 처리
- #uris : URI 이스케이프 지원
- #dates : java.util.Date 서식 지원
- #calendars : java.util.Calendar 서식 지원
- #temporals : 자바8 날짜 서식 지원
- #numbers : 숫자 서식 지원
- #strings : 문자 관련 편의 기능
- #objects : 객체 관련 기능 제공
- #bools : boolean 관련 기능 제공
- #arrays : 배열 관련 기능 제공
- #lists , #sets , #maps : 컬렉션 관련 기능 제공
- #ids : 아이디 처리 관련 기능 제공, 뒤에서 설명

 

URL 링크 

- 타임리프에서 URL을 생성할 때는 @{...} 문법을 사용

단순한 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
경로 변수와 쿼리 파라미터를 함께 사용할 수 있다.

 

리터럴

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

- 타임리프에서 리터럴은 항상 '(작은 따음표)로 감싸야 한다.

하지만 공백없이 쭉 이어진다면 하나의 의미있는 토큰으로 인지하게 때문에 작은 따음표를 생성할 수있다.

 

리터럴 대체 : '(작은 따음표) 로 묶지 않고 | 를 이용해 사용할 수도 있다.

 

속성 값 설정

타임리프 태그 속성 

: 타임리프는 주로 HTML 태그에  th:* 속성을 지정하는 방식으로 동작, 속성을 적용하면 기존 속성을 대체, 기본 속성이 없을 시 생성

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

 

반복

: 타임리프에서 반복은 th: each 를 사용한다. 

- 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 : 현재 객체

 

if,unless : 타임리프에서는 조건이 맞지 않으면 그 태그 전체를 렌더링하지 않는다.

switch : * 만족하는 조건이 없을 때 사용하는 디폴트이다

 

주석

표준 HTML 주석 : <!--   --!>

->타임리프가 렌더링 하지 않고 그대로 남겨둠

 

타임리프 파서 주석 : <!--/*-->    <!--*/-->

->타임리프 파서 주석은 타임리프의 진짜 주석, 렌더링에서 주석 부분을 제거

 

타임리프 프로토타입 주석 : <!--/*/      /*/--> 

->타임리프를 렌더링한 경우에는 보이지만, HTML 파일 자체를 보면 주석 처리

 

블록 : <th:block> 

 

자바스크립트 인라인

<script th:inline="javascript"> 을 이용해 타임리프가 제공해 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다.

 

자바스크립트 인라인의 반복

ex)

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

 

 

 

 

출처) https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2/dashboard

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의