🍃 Thymeleaf란 무엇일까?
- 템플릿 엔진
- 템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서(응답 화면)를 출력하는 것
-> 만들어둔 화면(html)에 데이터를 추가하여 하나의 html로 만들어서 응답(JSP도 템플릿 엔진)
- Thymeleaf(타임리프)
- 웹 및 실행형 환경 모두를 위한 최신 서버 측 템플릿 엔진
- HTML 파일에서 th(Thymeleaf) 속성을 이용해 컨트롤러로 부터 전달 받은 데이터를 이용해 동적 페이지를 만들 수 있음
- Spring Boot에서는 JSP가 아닌 Thymeleaf 사용을 권장하고 있음
Thymeleaf 문법(표현식)
<html lang="en" xmlns:th="http://www.thymeleaf.org">- th속성을 사용하기 위해 선언된 네임스페이스
순수 HTML로만 이루어진 페이지의 경우, 선언되지 않아도 무관
Spring EL
${key} : 변수, Model 등으로 전달된 데이터의 key 입력 시 value 출력
<p text=${member}></p>
<p text=${member.memberNo}</p>
- *{key} : 선택 변수, 객체에 포함된 필드를 출력
- th:object 속성과 같이 사용
<!-- member 객체의 필드 memberNo와 memberPw 등을 출력 -->
<div obejct="${member}">
<span text="*{memberNo}"></span>
<span text="*{memberId}"></span>
</div>#{key} : Message Expression
src/main/resoources/messages.properties에 작성된 값을 얻어와 출력
@{url} : 링크 URL, URL 형식 출력
<!-- 단순 url-->
<a href="@{/board}">단순 url</a>
<!-- 쿼리스트링 포함 url-->
<a href="@{/board(key=${key}, queyr=${query})}">쿼리스트링 포함</a>
<!-- PathVariable 포함 url-->
<a href="@{/board/{boardCode}/{boardNo}(boardCode=${boardCode}, boardNo=${boardNo})}">PathVarth:text, th:value
- 지정된 내용을 Text 형식으로 내용, input의 value로 출력
<!-- request scope에 key="memberName" value="홍길동" 이 있을 경우-->
<p text="${memberName}">회원이름</p>
<input type="text" value="${memberName}">
<!-- 랜더링 결과 -->
<p>홍길동</p>
<input type="text" value="홍길동">
- < th:block >
- Thymeleaf의 유일한 자체 태그
- Thymeleaf는 HTML 태그 내에 th 속성을 작성하여 기능을 정의하는게 일반적이지만 마땅한 HTML 태그가 없을 경우에 사용
th:if = "${조건}" / th:unless = ${조건} -> if//else 문
fragment(조각)을 이용한 공통 영역 처리
th:fragment="조각 이름"
- html 중 공통된 부분(반복되는 코드)을 조각(fragment)으로 지정
- [templates/fragments/common.html]
<nav fragment="nav"> <!-- 해당 요소에 nav라는 조각 이름을 지정-->
<ul>
<li><a href="#">공지사항</a></li>
<li><a href="#">자유 게시판</a></li>
<li><a href="#">질문 게시판</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">1:1문의</a></li>
<li><a href="/chatting">채팅</a></li>
</ul>
</nav>th:replace="~{조각파일경로 :: 조각이름}"
- 해당 속성이 작성된 요소를 지정된 조각으로 바꾸는 속성
- [templates/common/main.html]
<!-- 해당 요소를 조각으로 지정된 속성으로 변경-->
<div replace="~{fragments/commons :: nav}"></div>
<!-- 랜더링 결과 -->
<!-- div 요소가 nav라는 이름의 조각으로 변환됨 -->
<nav>
<ul>
<li><a href="#">공지사항</a></li>
<li><a href="#">자유 게시판</a></li>
<li><a href="#">질문 게시판</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">1:1문의</a></li>
<li><a href="/chatting">채팅</a></li>
</ul>
</nav>th:replace="~{html 파일 경로}"
- ::조각이름을 지정하지 않으면 html의 모든 내용을 얻어와 지정된 요소와 바꿈
<!-- common/header.html의 모든 내용을 읽어와 th:block 태그와 바꿈 -->
< block replace="~{common/header}"></ block>
<!-- common/footer.html의 모든 내용을 읽어와 th:block 태그와 바꿈 -->
< block replace="~{common/footer}"></ block>