타임리프 문법

 

th:text - 텍스트 출력

<div>
	<p th:text="${data}"></p>
</div>

${#strings.substring}(적용할 문자열, 시작범위, 끝 범위) - 어떤 범위까지의 문자열을 추출 

예제) 
// board.writer 데이터에 있는 문자열을 1~2범위만큼 보여준다
// board.writer의 데이터가 홍길동 이라고 가정을 하면 홍(0)길(1)동(2)의 
// 1~2(길)만 출력된다
<p th:text="${#strings.substring(board.writer, 1, 2)}></p>

${#strings.repeat(출력할 글자, 출력할 글자 수)} - 어떤 범위까지 특정 글자를 출력

// * 를 3개 출력
<p th:text="${#strings.repeat('*',3)}"></p>


// ${#strings.substring()}과 합친 예제)
// 이름의 성만 표시되고 나머지는 * 처리 되게 하고 싶다.
<p th:text="${#strings.substring('홍길동',1,2)} + ${#strings.repeat('*',2)}"></p>

// 출력 결과: 홍**

${#strings.length(문자열데이터)} - 글자 길이

// 홍길동의 길이
<p th:text="${#strings.length('홍길동')}"></p> // 출력결과: 3

// user의 phoneNumber의 길이
<p th:text="${#strings.length(user.phoneNumber)}"></p> // 출력결과: 13 (010-0000-0000)

위의 substring, repeat, length 를 합친 응용 예제)

// list.writer => 홍길동
// 홍길동의 0~1 글자범위인 홍만 나오고 - (substring) 
// 홍길동의 글자수 - 1 만큼은 * 이 출력되게 한다.(length, repeat)  
// 홍길동의 글자수 - 1은 3-1 = 2 즉 홍 뒤에 글자는 ** 나오게 처리해
// 홍** 이 된다.

<p 
	th:text="${#strings.substring(list.writer, 0, 1)} + 
    ${#strings.repeat('*', #strings.length(list.writer) - 1)}">
</p>

---

th:src - 이미지 경로

<img th:src="${data}">

 

---

th:href - 이동하고자 하는 경로(url)

<a th:href="@{/home/user}"> // 파라미터 없는 경우
<a th:href="@{/home/user?id={id}}"> // 파라미터값이 있는 경우
<a th:href="@{/home/user(id = ${id})}" // 파라미터값이 있는 경우
<a th:href="@{/home/user(id = ${id}, name=${name})}" // 파라미터 값이 여러 개

---

th:value - 값 지정

<input type="text" th:value=${name}>

---

th:if, th:unless - 조건문

<a href="/home/adminpage" th:if="${userRole == 'admin'}">관리자 페이지</a> // userRole이 admin인 경우 보인다.

<a href="/home/userpage" th:unless="${userRole == 'guest'}"마이페이지</a> // userRole이 admin이 아닌 경우 보인다.

// th:unless는 th:if문에 들어가는 조건과 동일한 조건을 지정해야함

// th:if 여러개로 처리해도 가능

th:switch, th:case - 조건문 (자바의 switch문이랑 동일)

<th:block th:switch="${userRole}"> 
  <span th:case="1">관리자</span> 
  <span th:case="2">게스트</span> 
</th:block>

---

th:each - 반복문

<div th:each="list: ${userList}">
	<span th:text="${list.name}"></span>
    <span th:text="${list.country}"></span>
</div>

// 향상된 for문 처럼 th:each="반복해서 나온 값을 담을 객체명: ${컨트롤러에서 넘겨준 데이터명}">

${#numbers.sequence(반복 시작할 수, 반복 종료할 수)}

<!-- 메인 페이징 번호 영역 -->
<th:block th:each="num : ${#numbers.sequence(0, 9)}">
	<p th:text=${num}></p>
</th:block>

// p태그에 0 ~ 9 까지 출력

---

th:block - 임의의 블록(가상 태그), 조건문, 반복문과 같이 많이 사용됨

<th:block>

</th:block>

조건문 예제) // th:block 안에 조건문이 맞으면 block안에 내용이 출력
<th:block th:if="${user.role == 'admin'}">
	<h3>관리자님 반갑습니다.</h3>
</th:block>

<th:block th:if="${user.role == 'guest'}">
	<h3>고객님 반갑습니다.</h3>
</th:block>

반복문 예제) // th:block 안에 반목문 설정 하면 반복문 안에 내용들이 출력
<th:block th:each="list: ${userList}">
	<div>
    	<span th:text="${list.name}"></span>
        <span th:text="${list.country}"></span>
    </div>
</th:block>

---

th:onclick - onclick 이벤트 안에 타임리프 값 넣어주기

HTML
// JS 함수([[${변수명}]])
<button th:onclick="checkLike([[${comment.cidx}]])">클릭해주세요.</button>

JS
// JS 는 매개인자로 들어온 값을 꺼내 사용하면됨
function leafBtn(cidx){

	console.log(cidx)
	
}

---

th:data - data 속성에 타임리프 값 넣어주기(다른 태그에도 다 사용 가능)

<p data-name="${player.name}" data-age="${player.age}" id="player">player 속성</p>