💡 개념
Thymeleaf를 알기전, 템플릿 엔진의 개념을 알아야 한다.
템플릿 엔진이란? 템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서를 출력하는 소프트웨어 또는 소프트웨어 컴포넌트를 말한다.
뷰는 사용자에게 보여줄 내용을 처리 결과 데이터를 가지고 HTML을 생성해서 크라이언트에 응답을 돌려주는 역할을 한다. 간단하게 템플릿 엔진의 개념을 정의하자면, 데이터를 미리 정의된 템플릿에 바인딩해서 뷰의 표시를 도와주는 것이다.
Thymeleaf 란? '템플릿 엔진'의 일종이다. HTML 기반의 템플릿 엔진으로, 정해진 문법으로 작성하면 페이지를 동적으로 조립해 준다. HTML을 기반으로 하기 때문에 최종 출력을 생각하면서 뷰를 만들 수 있다. 즉, Thymeleaf를 사용하면 디자이너와 쉽게 분업할 수 있다.
html 태그에 속성에 thymeleaf 메인 스페이스를 부착해서 사용하면 된다.
<html xmlns:th="http://www.thymeleaf.org">🐾 또한, 프로젝트를 만들 때 starter에 thymeleaf를 추가한다면,
스프링부트의 기본설정으로 src/main/resources/templates 폴더 아래 요청 핸들러 메서드의 반환값 + .html 파일이 참조된다.
💡 기본 문법
소스 코드 : https://github.com/junghyeyoun/spring
📘 태그 안 삽입
📎 직접 문자를 삽입
<span th:text="'hi'">안녕</span>큰 따옴표("")는 기본문법에 포함되는 것이고 hi는 문자이기 때문에 작은따옴표('')를 사용해주어야 한다. 태그안에 직접 문자를 추가하였기 때문에 hi라고 출력되며 '안녕'은 보이지 않는다. 이 영역의 텍스트는 순수 html에서는 보이나 타임리프 서식(표현식)을 적용하면 무시된다.
📎 controller 문자를 삽입
controller
@Controller
public class TestController {
@GetMapping("thymetest")
public String sijak(Model model) {
model.addAttribute("msg", "타임리프 만세!");
}html(Thymeleaf)
<span th:text="${msg}"></span>controller에서 생성해둔 문자를 부를 때는 ${msg}의 형태로 불러줄 수 있다.
📘 인라인 처리
<span>[[${msg}]]</span> 인라인 처리는 text 영역에 변수를 기술하는 방법이다. [[${}]] 형태를 사용한다. 직접 문자를 삽입하는 경우처럼 태그 사이에 문자를 입력할 수는 없다.
이 방식을 사용하면 태그를 속성에 추가하는 대신 본문에 변수를 포함할 수 있어 고정값과 변수를 조합하고 싶은 경우에는 이 방법이 편리하다.
📘 값 결합
📎 + 사용
<span th:text="'메세지는 ' + ${msg} +'입니다'"></span>📎 리터럴 치환
<span th:text="|메세지는 + ${msg} +입니다|"></span>"|문자열|" 형태 사용한다.
📘 지역 변수
<span th:with="kor=90,eng=80">
<b th:text="|${kor}+${eng}=${kor + eng}|"></b>
</span>th:with="변수이름=값" 형태로 변수를 선언할 수 있으며, 변수는 span tag 내에서만 유효하다. 변수들 사이의 연산도 가능하며 만역 값에 작음따옴표('')를 붙인다면 문자열 처리 되기 때문에 kor+eng가 170이 아니라 9080이 된다.
📘 관계 연산
<span th:text="3>=4"></span><br>
<span th:text="3<4"></span><br>
<span th:text="3==4"></span><br>
<span th:text="3!=4"></span>숫자뿐만 아니라 문자열 비교도 가능하다.
📘 조건 연산
📎 if, unless
<span th:text="5 > 4?'크구나':'작구나'"></span>삼항 연산자 조건?값1:값2 를 활용할 수 있다. 조건이 true라면 값1을 반환하고 false라면 값2를 반환한다.
📎 true
<span th:if="5>4">
<b>조건이 참일 때 수행</b>
</span>📎 false
<span th:unless="5==4">
<b>조건이 거짓일 때 수행</b>
</span>📎 switch
<div th:switch="${msg}">
<b th:case="한국인" th:text="|${msg2}님|"></b>
<i th:case="홍길동" th:text="|${msg2}씨|"></i>
<strong style="color: indianred;" th:case="*">모르는 이름이네요</strong>
</div>case에 *를 쓴다면 어떤 값도 매칭되지 않을 때를 의미한다. msg는 "홍길동"이었고 결과는 이탤릭체로 홍길동이라고 출력된다.
참고
스프링 프레임워크 첫걸음 - 주식회사 후루네스 키노시타 마사아키 지음 , 전민수 옮김 (도서)
http://gigatera.co.kr/wp/tag/thymeleaf/ (썸네일 이미지)
