[스프링 웹 MVC 2편] 002. 타임리프 기본기능(2)

조건부 평가

타임리프의 조건식
if, unless (if의 반대)

<span th:text="'미성년자'" th:if="${user.age lt 20}"></span>
<span th:text="'미성년자'" th:unless="${user.age ge 20}"></span>

타임리프는 해당 조건이 맞지 않는 경우 태그 자체를 렌더링하지 않는다.
조건이 false인 경우 해당 태그 span 자체가 렌더링 되지 않고 사라짐

switch
*은 만족하는 조건이 없을때 사용하는 디폴트에 해당함.

---

주석

<h1>1. 표준 HTML 주석</h1>
<!--
<span th:text="${data}">html data</span>
-->
<h1>2. 타임리프 파서 주석</h1>
<!--/* [[${data}]] */-->
<!--/*-->
<span th:text="${data}">html data</span>
<!--*/-->
<h1>3. 타임리프 프로토타입 주석</h1>
<!--/*/
<span th:text="${data}">html data</span>
/*/-->

1. 표준 HTML 주석
   1. 자바스크립트의 표준 HTML 주석은 타임리프가 렌더링하지 않고 그대로 남겨둔다
2. 타임리프 파서 주석
   1. 타임리프 파서 주석은 타임리프의 주석으로 렌더링 과정 중 주석 부분이 날아간다
3. 타임리프 프로토타입 주석
   1. 타임리프 렌더링이 거쳐지는 경우 정상 렌더링, 아니면 사라짐
   2. 즉, HTML 코드 자체를 열면 주석처리가 되는데, 타임리프로 렌더링 한 경우에만 보이는 기능

---

블록

<th:block>은 HTML 태그가 아니다. 타임리프의 유일한 자체 태그에 해당한다.

타임리프 특성상 HTML 태그 안에 속성으로 기능을 정의해서 사용하는데,
위 예처럼 이렇게 사용하기 애매한 경우에 사용하면 됨, th:block은 렌더링시 제거된다.

---

자바스크립트 인라인

타임리프는 자바스크립트를 편리하게 할 수 있는 기능 제공
<script> 대신 <script th:inline="javascript">

<!-- 자바스크립트 인라인 사용 전 -->
<script>
var username = [[${user.username}]];
var age = [[${user.age}]];
//자바스크립트 내추럴 템플릿
var username2 = /*[[${user.username}]]*/ "test username";
//객체
var user = [[${user}]]; // 이거 toString으로 동작함
</script>
<!-- 자바스크립트 인라인 사용 후 -->
<script th:inline="javascript">
var username = [[${user.username}]];
var age = [[${user.age}]];
//자바스크립트 내추럴 템플릿
var username2 = /*[[${user.username}]]*/ "test username";
//객체
var user = [[${user}]];
</script>

다음 코드 처럼 사용하면 model.addAttribute 되었던 속성을 그대로 가져다 쓸 수 있다
서버에서 동작하는게 아님 클라이언트에서 동작함 (JS)

자바스크립트 인라인 적용에 따른 렌더링 결과는 다음과 같게 됨

<script>
var username = userA;
var age = 10;
//자바스크립트 내추럴 템플릿
var username2 = /*userA*/ "test username";
//객체
var user = BasicController.User(username=userA, age=10);
</script>

<script>
var username = "userA";
var age = 10;
//자바스크립트 내추럴 템플릿
var username2 = "userA";
//객체
var user = {"username":"userA","age":10};
<!-- JSON으로 변환해줌! -->
</script>

자바스크립트 inline each - 별도 참고 (Javascript)

---

템플릿 조각

복잡한 코드를 짤때 재활용을 많이 하듯이 페이지의 공통부분을 따로 조각으로 만들어서 불러다 쓸 수 있음.