📖 Thymeleaf?
Spring framework 프로젝트에서 MVC 패턴을 사용해 개발할 때, View에 해당하는 화면 구현 시 사용하는 템플릿 엔진이다.
템플릿 엔진 :
HTML(Markup)과 데이터를 결합한 결과물을 만들어 주는 도구이다.
타임리프는 템플릿 엔진 중 하나로, Spring Boot에서는 JSP가 아닌 Thymeleaf 사용을 권장하고 있다.
📖 사용이유
보통 자바에서 웹 개발시 <% %>형태의 JSP를 이용하여 진행한다. 그러나 이 방식은 스크립트릿과 HTML이 혼재된 상태가 되고 HTML 태그의 반복적인 사용으로 인해 수정하기 어려운 상황이 되는데 이러한 상태를 해결할 수 있는 것이 템플릿 엔진이다.
🍂 Thymeleaf 기본경로
src -> main -> resources -> templates이다.
template 폴더와 같은 위치에 있는 static 폴더는 css와 같은 정적 파일을 담는 폴더이다.
하지만 templates 폴더 하위에 있는 html 파일들은 url을 바로 호출할 수가 없다.
때문에 Controller 클래스를 생성하고, Controller에서 templates 폴더 하위의 html 폴더에 접근할 수 있도록 세팅해줘야 한다.
특징
서버를 가동하지 않으면 순수 HTML을, 서버를 구동하여 뷰 템플릿을 거쳐 동적으로 변경된 HTML을 확인할 수 있다.
이것이 그 차이라고 볼 수 있다.
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
우리가 아는 html이 아니라 타임리프 문서이다.<br/><!--HttpServletRequest가 밑의 th:text="${msg}" 를 관여 -->
메세지 : <span th:text="${msg}">이 영역의 텍스트는 순수 html에서는 보이나 타임리프 서식(타임리프 표현식)을 적용하면 무시된다.</span>
<br/>
메세지(인라인 처리 - text 영역에 변수를 기술) : <span>[[${msg2}]]</span>
<br/>
값 결합(+를 사용) : <span th:text="'메세지는 ' + ${msg2} + '입니다.'"></span>
<br/>
값 결합(리터럴 치환 사용) : <span th:text="|메세지는 ${msg2} 입니다.|">"|문자열|" 형태 사용</span>
<br/>
지역 변수 사용 :
<span th:with="kor=90,eng=80"><!-- end='80'으로 주면 80을 문자로 받아들여서 kor+eng = 9080이 됨-->
<b th:text="|${kor} + ${eng} = ${kor + eng}|">변수는 span tag 내에서만 유효</b>
</span>
<br/>코드를 보면 타임리프를 사용하기 위해 <html xmlns:th="http://www.thymeleaf.org">를 주었다.
<span th:text="${msg}">은 서버에서 받아온 데이터를 ${ } 을 이용하여 표기한 것이다.
🐆 타임리프 자주 사용하는 문법
| 문법 | 역할 | 예제 |
|---|---|---|
| th:text | 문자열 생성 | th:text=" ${data} " |
| th:each | 반복문 | th:each="article : ${articleList}"` |
| th:if | if 조건문 | th:if=${data != null} |
| th:href | 이동 경로 | `th:href=" @{/article/list(id= ${data} )} " |
