타임리프 - 기본 기능

✅ 타임리프 특징

• 서버 사이드 HTML 렌더링(SSR) -> 백엔드서버에서 HTML을 동적으로 렌더링 하는 용도
• 네츄럴 템플릿 -> 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용
• 스프링 통합 지원 -> 스프링의 다양한 기능을 편리하게 사용할 수 있게 지원

✅ 텍스트 - text, utext

• utext : 타임리프가 설정한 이스케이프 제공을 하지 않고 출력하는 명령어

<span th:text="${data}">  // 컨트롤러에서 넘어온 데이터를 타임리프에서 출력하는 방법
[[${data}]] // HTML 태그 속성이 아니라 컨텐츠 영역 안에서 직접 출력하기

웹 브라우저는 < 를 HTML 테그의 시작으로 인식한다. 따라서 < 를 테그의 시작이 아니라 문자로 표현할 수 있는 방법이 필요한데, 이것을 HTML 엔티티라 한다. 그리고 이렇게 HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것을 이스케이프(escape)라 한다.
그리고 타임리프가 제공하는 th:text , [[...]] 는 기본적으로 이스케이프 (escape)를 제공
> = &lt;
< = &gt;
즉 컨트롤러에서 데이터를 넘겨줄 때, <b>Spring</b> 자체로 보내주면
이미 이스케이프가 적용된 타임리프는 저 문장 그대로 출력을 해준다
데이터를 보낼때 태그적용을 시킨상태에서 보내고 싶으면 utext 를 사용한다

<span th:utext="${data}"> 

✅ 변수 - SpringEL

• 밑에 예시는 객체, 리스트, Map을 각 모델에 저장한 후 타임리프에서 꺼내 쓰는 예시이다

<ul>Object
    <!-- model.addAttribute("user",userA); -->
    <li>${user.username} = <span th:text="${user.username}"></span></li>
    <li>${user['username']} = <span th:text="${user['username']}"></span></li>
    <li>${user.getUsername()} = <span th:text="${user.getUsername()}"></span></li>
</ul>
<ul>List
    <!--  model.addAttribute("users",list); -->
    <li>${users[0].username} = <span th:text="${users[0].username}"></span></li>
    <li>${users[0]['username']} = <span th:text="${users[0]['username']}"></span>
    </li>
    <li>${users[0].getUsername()} = <span th:text="${users[0].getUsername()}"></span>
    </li>
</ul>
<ul>Map
    <!-- model.addAttribute("userMap",map); -->
    <li>${userMap['userA'].username} = <span th:text="${userMap['userA'].username}"></span></li>
    <li>${userMap['userA']['username']} = <span th:text="${userMap['userA']['username']}"></span></li>
    <li>${userMap['userA'].getUsername()} = <span th:text="${userMap['userA'].getUsername()}"></span></li>
</ul>