💡 삼항연산자(?)를 쓸 때 괄호로 묶어주기!
<span th:text="(${#numbers.formatInteger(param.inc,1)}?:0) + (${#numbers.formatInteger(param.qt,1)}?:1)">1</span>
#지역변수(th:with)
태그의 영역 안에서만 사용할 수 있는 지역변수를 선언할 수도 있다.
아래에서는 fieldset에 지역변수를 선언했는데,
그렇다면 이 ${qt}라는 지역변수는
<fieldset></fieldset>안에서만 사용할 수 있는 지역변수가 된다.
💡 th:with="변수명=식 또는 값"
<fieldset th:with="qt=(${#numbers.formatInteger(param.inc,1)}?:0) + (${#numbers.formatInteger(param.qt,1)}?:1)"> <!--이 태그가 끝날때까지만 사용할 수 있는 지역변수이다.-->
<legend>수량</legend>
<!-- 수량을 추가하고 빼고 할 때마다 데이터가 전송되어야 한다.
때문에 수량을 늘리고 줄이는 것은 모두 submit이 된다. -->
<div>
<input class="icon icon-minus" type="submit" name="inc" value="-1" th:disabled="${qt le 1}">
<!--삼항연산자 쓸 때 참:거짓값 중에서 :거짓값만 쓰고 앞에 truthy를 지정하지 않으면) 참이면 조건식의 결과값이 truthy로 사용된다. 거짓이면 설정한 값(1) 출력-->
<span th:text="${qt}">1</span>
<input type="hidden" name="qt" th:value="${qt}">
<input class="icon icon-plus" type="submit" name="inc" value="1" th:disabled="${qt ge 10}">
<span th:text="${qt}*4500">4500</span><span>원</span>
</div>
</fieldset>
#링크걸기(th:href)
타임리프는 기존의 HTML을 수정하지 않는다.
정적으로 링크가 달려있는 것을 수정하는 것이 아니라
추가로 th:href="" 속성을 하나 더 추가한다.
출처: 타임리프( https://www.thymeleaf.org/)
사용예시를 확인해보자.
💡 th:href속성을 사용해서 링크를 걸어보자.
핵심은 href=""를 그냥 둔 상태로 th:href를 추가하는 것이다.
타임리프는 기존의 HTML을 수정하지 않는다. 추가할 뿐!
❌ 틀린코드:
<h1>에 th:text를 넣으면 <a>를 포함한 안의 내용이 다 날라가니까 주의
<h1 th:text="${m.korName}">
<a href="detail?id=" th:href="@{detail(id=${m.id})}">
카페라떼
</a>
</h1>
⭕ 올바른코드:
<h1>이 아니라 <a>에 th:text 속성을 넣는다.
<h1>
<a href="detail?id=" th:href="@{detail(id=${m.id})}" th:text="${m.korName}">
카페라떼
</a>
</h1>
#타임리프 구분자
이때 @를 사용하는 것은 경로를 표현하는 것이다.
💡링크를 걸 때는 @를 사용 그 이외의 자잘한 구분자들을 잘 확인해보자.
1. $: 변수 표현 2. *: 이미 객체를 선언(th:object)했다면 그 객체안의 속성만으로 한정하여 표현 3. @: 링크 표현 4. ~: fragment 표현, 절대경로임
#객체 선언(th:object)
객체를 선언하고 그 속성을 꺼내서 사용해보자.
이때 객체 선언은 ${}로 하고 그 밑에 속성을 꺼내 쓸 때는 *{}로 한다.
💡 th:object를 사용해보자.
<section th:object="${menu}">
<!--객체의 속성은 $가 아니라 *을 써서 표현한다.
$를 사용하면 선언한 object의 속성을 쓰는건지 전역의 속성을 쓰는건지 충돌이 난다.
혹은 그냥 with로 해서 th:with="m=${menu}"라고 쓴 뒤에
th:text="${m.korName}과 같이 사용할 수도 있다."-->
<h1 th:text="*{korName}">카페라떼</h1>
<h2 th:text="*{engName}">Cafe Latte</h2>
<p>알랜드만의 로스팅 기법으로 볶은 원두를 사용하여 추출된 풍부한 에스프레소와 신선한 우유가 어우러진 대표 라떼</p>
<div><img src="커피.png" th:src="*{img}"></div>
💙 마치며
1.
타임리프를 바인딩할 때는
일반속성앞에 th:를 붙인다.
기존에 정의된 일반 속성을 수정하는 것이 아니라
일반속성은 그대로 두고 바인딩한 속성을 추가하는 것이다.
✅ 예시: <a href="경로" th:href="바꿀 경로">
2.
th:text를 사용할 때 주의하자.
🚨 주의사항
th:text는 가장 안쪽에 대체할 텍스트가 있는 속성태그에만 넣는다.
안쪽에 여러 속성에 타임리프 바인딩을 해놓아도 가장 바깥쪽 블록에 th:text를 해버리면 안의 내용이 전부 사라진다.
