Thymeleaf 예제
literal / 문자 결합
veriable / 값 꺼내기
operation / 산술연산자, 비교 연산자
No-Operation
조건식
속성 설정
속성 추가
Checkbox 처리
literal / 문자 결합
<html xmlns:th="http://www.thymeleaf.org">
namespace 지정 -> th
th를 부르면 타임리프로 사용하겠다는 뜻이다.
<span th:text=“${say}”></span>
say 값이 없으면 Hi나옴 있으면 안나온다.
<li>'hello' + ' world' = <span th:text="'hello' + ' world'"></span></li>
//=> 결합 / 'hello' + ' world' = hello world
<li>'hello world' = <span th:text="'hello world'"></span></li>
//=> 문자열 그대로 / 'hello world' = hello world
<li>'hello' + ${data} = <span th:text="'hello' + ${data}"></span></li>
//=> 'hello' + ${data} = hello스프링부트
<li>리터럴 대체 |hello + ${data}| = <span th:text="|hello ${data}|"></span></li>
//=> 리터럴 대체 |hello + ${data}| = hello 스프링부트
파이프 기호 | 를 사용하여 문자열을 출력할 수 있다.
Thymeleaf에서 파이프 기호(|)는 문자열 내에서 변수를 삽입할 때 사용한다.
veriable / 값 꺼내기
${aa.name} = 홍길동
${aa['name']} = 홍길동
${aa.getName()} = 홍길동
${list[1].name} = 김태리
${list[1]['name']} = 김태리
${list[1].getName()} = 김태리
${map['cc'].name} = 이제훈
${map['cc']['name']} = 이제훈
${map['cc'].getName()} = 이제훈
th:with="변수" = ${값}
이 구역에서만 사용하겠다. list[0]를 가져와서 변수에 저장하겠다.
<ul th:with="변수 = ${list[0]}">
<li>이름 = <span th:text="${first.name}"></span></li>
<li>나이 = <span th:text="${first.age}"></span></li>
</ul>
operation / 산술연산자, 비교 연산자
산술연산자
<li>25 + 36 = <span th:text="25+36"></span></li>
<li>25 % 2 == 0 : <span th:text="25%2 == 0"></span></li>
같은 얘기
<li>25 + 36 = [[${25 + 36}]]</li>
<li>25 % 2 == 0 : [[${25 % 2 == 0}]]</li>
th:text="25+36" --> [[${25 + 36}]]
비교 연산자
<li>1 > 10 <span th:text="1 > 10"></span></li>
//1 > 10 false
<li>1 gt 10 <span th:text="1 gt 10"></span></li>
//1 gt 10 false
<li>1 >= 10 <span th:text="1 >= 10"></span></li>
//1 >= 10 false
<li>1 ge 10 <span th:text="1 ge 10"></span></li>
//1 ge 10 false
<li>1 == 10 <span th:text="1 == 10"></span></li>
//1 == 10 false
<li>1 != 10 <span th:text="1 != 10"></span></li>
//1 != 10 true
조건식
(10 % 2==0 조건이 맞으면 짝수, 아니면 홀수) <span th:text="10%2==0 ? '짝수' : '홀수'"></span>
결과 : (10 % 2==0 조건이 맞으면 짝수, 아니면 홀수) 짝수
Elvis(?:) 연산자 - null 또는 빈값 일 때 사용
th:text="${data}?: '데이터가 없습니다.'"
${data}?:'데이터가 없습니다.' = 데이터가 없습니다.
${nullData}?:'데이터가 없습니다.' = 데이터가 없습니다.
${bb}?:'데이터가 없습니다.' = 데이터가 없습니다.
No-Operation
<span th:text="${data}?: _">데이터가 없습니다.</span>
${data} ? : _ = 데이터가 없습니다.
${nullData} ? : _ = 데이터가 없습니다.
속성 설정
예전 : <input type="text" name="mock"/>
input -> input 태그
type, name -> 속성(attribute)
타임리프를 이용한 속성 설정 : <input type="text" name="mock" th:name="userName"/>
[ 결과 ]
예전 : <input type="text" name="mock"/>
타임리프를 이용한 속성 설정 : <input type="text" name="userName">
속성 추가
<input type="text" class="text" th:attrappend="class=' large'"/> : 뒤
<input type="text" class="text" th:attrprepend="class='large '"/> : 앞
<input type="text" class="text" th:classappend="large"/> : 자동으로 띄워짐, 뒤
[ 결과 ]
<input type="text" class="text large"
<input type="text" class="large text">
<input type="text" class="text large">
Checked 처리
<input type="checkbox" name="active" th:checked="true" id="1"/><label for="1">사과</label>
<input type="checkbox" name="active" th:checked="false" id="2"/><label for="2">딸기</label>
<input type="checkbox" name="active" id="3"/><label for="3">바나나</label>
'Spring' 카테고리의 다른 글
| Sprint Boot, Sprint Boot + MyBatis (0) | 2024.11.14 |
|---|---|
| Spring Boot, Thymeleaf 예제 -2 / 조건문 및 표현식 사용 (3) | 2024.11.13 |
| Spring Boot, Thymeleaf 란? (0) | 2024.11.12 |
| Spring Boot, React와 같이 작업하기 (0) | 2024.11.11 |
| Spring Boot, React와 같이 작업하기 (1) | 2024.11.07 |