# 01.Thymeleaf ## Thymeleaf ## 기본 기능 * 사용 선언 ```html ``` * 속성 변경 ```html th:href="@{/css/bootstrap.min.css}" ``` * URL 링크 표현식 ```html th:href="@{/css/bootstrap.min.css}" th:href="@{/basic/items/{itemId}(itemId=${item.id})}" th:href="@{/basic/items/{itemId}(itemId=${item.id}, query='test')}" th:href="@{|/basic/items/${item.id}|}" ``` * 속성 변경 ```html th:onclick="|location.href='@{/basic/items/add}'|" ``` * 반복 출력 ```html ``` * 변수 표현식 ```html 10000 ``` * 속성 변경 ```html ``` ### 기본 표현식 ``` ㅇ 간단한 표현 - 변수 표현식: ${...} - 선택 변수 표현식: \*{...} - 메시지 표현식: #{...} - 링크 URL 표현식: @{...} - 조각 표현식: ~{...} ㅇ 리터럴 - 텍스트: 'one text', 'Another one!',… - 숫자: 0, 34, 3.0, 12.3,… - 불린: true, false - 널: null - 리터럴 토큰: one, sometext, main,… ㅇ 문자 연산 - 문자 합치기: + - 리터럴 대체: |The name is ${name}| ㅇ 산술 연산 - Binary operators: +, -, \*, /, % - Minus sign (unary operator): - ㅇ 불린 연산 - Binary operators: and, or - Boolean negation (unary operator): !, not ㅇ 비교와 동등 - 비교: >, <, >=, <= (gt, lt, ge, le) - 동등 연산: ==, != (eq, ne) ㅇ 조건 연산 - If-then: (if) ? (then) - If-then-else: (if) ? (then) : (else) - Default: (value) ?: (defaultvalue) ㅇ 특별한 토큰 - No-Operation: \_ ``` ### 텍스트 * 텍스트 출력 * 기본적으로 escape 를 제공 * escape : HTML 에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것 * HTML 엔티티 : `<` 문자를 태그의 시작이 아닌 문자로 표현하는 방법 ```html

th:text 사용 =
컨텐츠 안에서 직접 출력하기 = [[${data}]]

``` * Unescape * `th:text` --> `th:utext` * `[[...]]` --> `[(...)]` ```html

th:utext =
[(...)] = [(${data})]

``` ### SpringEL 표현식 **Object** * `${user.username}` = userA * `${user['username']}` = userA * `${user.getUsername()}` = userA **List** * `${users[0].username}` = userA * `${users[0]['username']}` = userA * `${users[0].getUsername()}` = userA **Map** * `${userMap['userA'].username}` = userA * `${userMap['userA']['username']}` = userA * `${userMap['userA'].getUsername()}` = userA **Safe Navigation Operator** ```html

``` * errors`?.` 은 errors 가 null 일때 NullPointerException 대신, null 을 반환하는 문법 [참고](https://docs.spring.io/spring-framework/docs/current/reference/html/core.html#expressions-operator-safe-navigation) **지역변수** ```html

first member name :

``` ### 기본 객체 **Thymeleaf 기본 객체** * `${#request}` * `${#response}` * `${#session}` * `${#servletContext}` * `${#locale}` **편의 객체** * HTTP 요청 파라미터 접근: `${param.paramData}` * HTTP 세션 접근: `${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 : 아이디 처리 관련 기능 제공, 뒤에서 설명 **Reference** > [타임리프 유틸리티 객체](https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#expression-utilityobjects) > > [유틸리티 객체 예시](https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-b-expressionutility-objects) ### URL 링크 * 단순 URL * /hello ```html ``` * query parameter * /hello?param1=data1\¶m2=data2 ```html ``` * path variable * /hello/data1/data2 ```html ``` * query parameter + path variable * /hello/data1?param2=data2 ```html ``` **Reference** > ### 리터럴 * 문자: 'hello' (문자 리터럴은 항상 작은따옴표로 감싸야 함) ```html ``` * 숫자: 10 * 불린: true , false * null: null ### 연산 * 산술 연산 ```html 10 + 2 = ``` * 비교 연산 ```html 1 >= 10 = ``` * 조건식 ```html (10 % 2 == 0) ? = ``` * Elvis 연산자 ```html ${data} = ``` * No-Operation ```html ${data} = 데이터가 없습니다. ``` ### 속성 값 설정 * 속성 설정 ```html ``` * 속성 추가 ```html
``` * checked 처리 ```html

``` ### 반복 * 반복 ```html username 0 ``` * 상태 유지 ```html ``` * index : 0부터 시작 * count : 1부터 시작 * size : 전체 사이즈 * even , odd : 홀/짝수 여부 * first , last :처음/마지막 여부 * current : 현재 객체 ### 조건부 평가 * if, unless ```html ``` * switch ```html 10살 20살 기타 ``` ### 주석 * 표준 HTML 주석 * 타임리프가 렌더링하지 않고 유지 ```html ``` * 타임리프 파서 주석 * 렌더링에서 주석 부분을 제거 (타임리프 주석) ```html html data ``` * 타임리프 프로토타입 주석 * 타임리프 렌더링을 거쳐야만 이 부분이 정상 렌더링 (HTML 에서만 주석 처리) ```html ``` ### 블록 * th:each 로 해결이 어려울 때 사용 ```html

name: age:

요약

``` ### JavaScript Inline * javascript inline ```html ``` * each ```html ``` ### 템플릿 조각 * `/resources/templates/template/fragment/footer.html` ```html ``` * `/resources/templates/template/fragment/fragmentMain.html` ```html Title

부분 포함

부분 포함 insert (div tag 안에 삽입)

부분 포함 replace (div tag 대체)

파라미터 사용

``` ### 템플릿 레이아웃 **동적인 레이아웃** * `/resources/templates/template/layout/base.html` * 레이아웃이라는 큰 틀 ```html 레이아웃 타이틀 ``` * `/resources/templates/template/layout/layoutMain.html` * 틀 안에 필요한 코드 조각들을 전달 * ::title 은 현재 페이지의 title tag 들을 전달 * ::link 은 현재 페이지의 link tag 들을 전달 ```html 메인 타이틀 메인 컨텐츠 ``` **메인 레이아웃** * `/resources/templates/template/layoutExtend/layoutFile.html` * 기본 레이아웃(header, footer) 틀은 유지하고 title, content 만 변경 ```html 레이아웃 타이틀

레이아웃 H1

레이아웃 컨텐츠

``` * `/resources/templates/template/layoutExtend/layoutExtendMain.html` * 기본 레이아웃 틀로 교체하는데 하는데 title, content 는 전달 ```html 메인 페이지 타이틀

메인 페이지 컨텐츠

메인 페이지 포함 내용

``` ## Form ### 입력 폼 처리 ```html ``` * `th:object` : 커맨드 객체를 지정 * `\*{...}` : 선택 변수 식 (th:object 에서 선택한 객체에 접근) * `th:field` : HTML 태그의 id , name , value 속성을 자동으로 생성 * 렌더링 전/후 ```html ``` ```html ``` ### 체크 박스 #### 단일 **Register** ```html

판매 오픈

``` * 타임리프가 자동으로 `` 생성 * 체크 박스를 체크할 경우 on 을 전달하지만, 체크하지 않을 경우 값 자체를 전달하지 않음 -> 이 경우 hidden type 의 \_name input 태그를 사용하게 되면, false 로 값을 전달 (\_open=on) **View** ```html

판매 오픈

``` #### 멀티 (참고) @ModelAttribute 를 사용하면 해당 Controller 호출 시 regions() 에서 반환한 값이 자동으로 Model에 항상 담기게 됨 ```java @ModelAttribute("regions") public Map regions() { Map regions = new LinkedHashMap<>(); regions.put("SEOUL", "서울"); regions.put("BUSAN", "부산"); regions.put("JEJU", "제주"); return regions; } ``` **Register** ```html

서울

``` * 타임리프는 each로 체크박스 생성 시 동적으로 id에 순번을 매겨준다. `#ids`는 동적으로 생성된 id를 인식 * result ```html ``` **View** ```html

서울

``` * 타임리프는 `th:field`에 지정한 값과 `th:value`의 값을 비교해서 체크를 자동으로 처리 ### 라디오 버튼 ```java public enum ItemType { BOOK("도서"), FOOD("식품"), ETC("기타"); // NAME(description) private final String description; ItemType(String description) { this.description = description; } public String getDescription() { return description; } } ``` ```html

BOOK

``` * 라디오 버튼은 항상 하나의 값이 선택되어야 하므로 히든 버튼을 따로 생성하지 않음. ### 셀렉트 박스 **Register** ```html ``` ## Reference > [공식 사이트](https://www.thymeleaf.org/) > > [공식 메뉴얼 - 기본 기능](https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html) > > [공식 메뉴얼 - 스프링 통합](https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html)