Thymeleaf 핵심 요약

🌿 타임리프(Thymeleaf) 핵심 1페이지 요약

스프링 MVC에서 뷰 렌더링할 때 필요한 필수 기능만 모음.
CRUD 프로젝트 화면 구현 시 이거면 충분!

---

1️⃣ 변수/객체 접근

<!-- 단일 객체 -->
<span th:text="${user.username}"></span>
<span th:text="${user['username']}"></span>
<span th:text="${user.getUsername()}"></span>

<!-- 리스트 접근 -->
<span th:text="${userList[0].username}"></span>

<!-- 맵(Map) 접근 -->
<span th:text="${userMap['userA'].username}"></span>

✅ 3가지 방식 모두 같은 결과
. = 프로퍼티 접근, ['key'] = Map key 접근, getXxx() = Getter 호출

---

2️⃣ 반복 & 조건

<!-- 반복 -->
<tr th:each="user, stat : ${userList}">
    <td th:text="${stat.index}"></td>      <!-- 0부터 시작 -->
    <td th:text="${user.username}"></td>
</tr>

<!-- 조건 -->
<p th:if="${user.age >= 20}">성인</p>
<p th:unless="${user.age >= 20}">미성년자</p>

🔹 th:each="item, stat : ${리스트}"
보조변수(stat) → index, count, first, last 등 사용 가능

---

3️⃣ 속성 처리 (URL, 클래스 등)

<!-- 링크 -->
<a th:href="@{/users/{id}(id=${user.id})}">상세보기</a>
<!-- 결과: /users/1 -->

<!-- 경로 + 쿼리 -->
<a th:href="@{/users/{id}(id=${user.id}, sort='desc')}"></a>
<!-- 결과: /users/1?sort=desc -->

<!-- 클래스 동적 추가 -->
<div th:classappend="${user.active} ? 'on' : 'off'"></div>

---

4️⃣ 템플릿 조각 & 레이아웃

<!-- fragment.html -->
<footer th:fragment="footer">
  <p>Copyright 2025</p>
</footer>

<!-- 삽입 -->
<div th:insert="template/fragment :: footer"></div>
<!-- div 유지 + footer 내용 삽입 -->

<!-- 교체 -->
<div th:replace="template/fragment :: footer"></div>
<!-- div 사라지고 footer 태그로 교체 -->

---

5️⃣ 주석 처리

<!-- 표준 HTML 주석: 항상 렌더링 -->
<!-- 이 코멘트는 페이지 소스에 보임 -->

<!--/* 타임리프 주석: 렌더링 시 사라짐 */-->
<!--/* [[${user.username}]] */-->

---

✅ 최종 요약

1. 데이터 출력 → ${}, ., [], getXxx()
2. 반복 & 조건 → th:each, th:if / th:unless
3. 속성 처리 → th:href, th:src, th:classappend
4. 레이아웃 → th:fragment + insert / replace
5. 주석 처리 → <!--/* ... */-->

이 5가지만 기억하면 CRUD 웹 화면 구현 90% 가능