Spring Boot - Thymeleaf 2

UnKnown12·2022년 11월 24일
0

Thymeleaf

목록 보기
2/3

📌 literal

타임리프에선 문자 리터럴을 항상 '' 작은 따옴표로 감싸야한다.
ex) th:text =" 'hello' "
공백없이 쭉 이어지는 하나의 리터럴은 작은따옴표를 생략할 수 있다.
ex ) th:text = " hello " = O 가능
ex ) th:text = " hello world! " = X 에러
중간에 공백이 있다면 [''] 으로 감싸야한다.

📌 Operaions

비교 연산자

  • 타임리프에서 비교연산자를 구현할 때,
    HTML 의 비교연산자와
    java 비교연산자 둘 다 혼용이 가능하다.

ex) HTML 에서의 비교연산자

> 	=	gt/gt&;
<	=	lt
>=	=	ge
<=	=	le
!	=	not
==	=	eq
!-	=	neq 또는 ne

조건식 ( JS 의 삼항연산자 )

Elvis - 조건식 축약버전

📌Attribute 속성값

th:* 를 통해

기존 속성값이 있어도 타임리프 속성값을 덮어씌운다면
타임리프 속성값이 적용된다.

기존 속성값이 없다해도 타임리프 속성값이 적용

ex) <input type="text" name="mock" th:name="userA">	
	input 태그에 HTML name 속성이 있어도
    th:name 이 우선 적용된다. 
    

th:name=

  • HTML name 속성 설정

th:attrappend=" class=클래스이름"

  • HTML class 속성에 클래스이름 append 하기
    ex) input type="text" class="text" th:attrappend="class=large"
    = 클래스 이름 - class="textlarge"

th:attrappend=" class=클래스이름"

  • attrappend 와 달리 앞에서 class 이름을 덮 붙인다.

th:classappend = 클래스 이름

  • 기존 HTML 을 추가 하지 않고 th:* 의 이름을 클래스 이름으로 지정한다.

📌 each 반복문

th:each="user : ${users}

  • ${users} 안의 key , value 값을 모두 user 라는 타임리프 변수(HTML 변수) 에 담는다

tr th:each=" user, userStat : ${users}"

  • userStat ,
    user변수의 상태를 담은 타임리프 제공 리소스

  • 반복의 두번째 파라미터를 설정해서 반복의 상태를 확인 할 수 있다.

  • 두번째 파라미터는 생략이 가능하나, 생략하면 지정한 변수명이 생략한 지역에 추가된다.

  • 내가 지정한 변수명이 user 라면
    타임리프가 user + stat 를 자동으로 추가해준다

  • 지정 변수명 user 가 생략된다면
    stat 또는 타임리프 설정 값으로 지정 변수명 없이 추가가 된다.

userStat 가 가지고 올 수 있는 내용은

userStat 는 개발자가 지정한 리소스명이다.

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

📌 if , unless 조건부 평가

  • if 와 unless 는 반대

  • if , unless 조건에 맞지 않으면
    해당코드를 렌더링 조차 하지 않음 ( 컴파일 조차 하지 않는다 )

  • th:if="${user.age lt 20}
    user.age > 20

  • th:unless="${user.age ge 20}
    user.age >= 20

    th:switch

    			<td th:switch="${user.age}">
    				<span th:case="10">10살</span>
    				<span th:case="20">20살</span>
    				<span th:case="30">30살</span>
    				<span th:case="*">기타</span>
    			</td>
 
 ### 타임리프 주석
 
 + 기존 HTML 주석은 주석처리해도
 페이지 소스 보기를 통해 주석된 상태를 볼 수 있다.
  
 
## 📌 블록 

+ th:block 은 HTML 태그가 아닌 타임리프 고유 태그 이다.

## 📌 JS inline  
    
+ 타임리프는 자바스크립트에서 타임리프를 편하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다.

>
```html
	<script th:inline="javascript">

</script>

📌 templats layout

템플릿 레이아웃

 
profile
Hyobin12

0개의 댓글