안루피취뽀일기

[Spring Boot] Thymeleaf 타임리프가 뭔데 본문

Spring

[Spring Boot] Thymeleaf 타임리프가 뭔데

안루피 2023. 11. 30. 17:49
728x90

 

Thymeleaf 란?

 

템플릿 엔진 중 하나로 HTML 태그를 기반으로 th:속성을 추가해 동적인 View를 제공한다!

 

Java로 웹 개발을 접해보았다면 Servlet/JSP로 입문을 했을 가능성이 높고, (나또한 그러했고!)  Spring과 MyBatis, JSP로 그 다음을 접해보았을 것이다. JSP는 Java Server Page의 약자로 그간 많이 사용되어왔고, 현재도 많이 쓰이는 뷰 엔진(View Engine)이지만 최근 스프링 부트로 넘어오면서 JSP 대신 Thymeleaf라는 비교적 새로운 뷰 템플릿 엔진이 등장하였고 많은 사람들이 이것을 사용한다. 물론 Thymeleaf말고도 Mustache, Groovy, FreeMarker ... 등 많은 뷰 엔진이 있다.

 

Thymeleaf는 HTML, XML, JavaScript, CSS 등의 마크업 언어를 지원하며, 다른 템플릿 엔진들과 달리 뷰 템플릿 파일 자체도 유효한 마크업 문서이다. 이는 템플릿 파일이 개발자와 디자이너 모두에게 친숙한 문법으로 작성될 수 있도록 하는 장점이 있다. 또한 Thymeleaf는 서버 측에서 렌더링되므로 클라이언트 측에서 추가적인 로딩 없이 바로 렌더링 결과를 확인할 수 있다. 이를 통해 사용자 경험을 향상시키는데 도움이 된다.

 

Thymeleaf는 Spring Framework와 같은 자바 기반 웹 프레임워크와 함께 많이 사용되며, 다양한 기능을 제공한다. 예를 들어, 반복문, 조건문, 변수, 링크, 이미지 등을 다루는 기능을 지원하며, Thymeleaf Layout과 같은 추가 기능을 통해 레이아웃을 쉽게 관리할 수 있다.

 

그래서 JSP 와 thymeleaf 차이점은 무엇이냐..

 

jsp는 서블릿이라는 형태로 변환되어 실행된다. 서블릿은 자바소스라 jsp에서 자바코드를 사용하는 것이 가능해지는데 그렇다보니 view에 비지니스 로직이 포함되어 복잡하고 무거워지게 된다. 반면, 타임리프는 서블릿으로 변환되지 않다보니 비지니스 로직이 완전히 분리가 된다는 장점이 있다. jsp는 jar 패키징이 불가하고, war 패키징만이 가능하다. war는 jar와 달리 웹 서버나 WAS가 필요하고, web-inf 디렉토리에서 사전 정의된 구조만을 사용한다. 그래서 jar패키징이 가능한 thymeleaf는 was없이도 브라우저에 직접 띄울 수가 있으니 훨씬 편리하다고 볼 수 있다.

 

 

그럼 Thymeleaf를 시작해보자!

나는 일단 Maven으로 배웠으니 Maven을 기준으로 써보도록 하겠다!

 

1. 의존성 추가

Maven은 pom.xml에 타임리프의 dependency를 추가해준다.

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

 

2. 타임리프를 적용할 HTML 문서에 네임스페이스를 추가

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 th:text="${name}">Name</h1>
</body>
</html>

 

그럼 일단 기본 설정 끄읏!

 

Thymeleaf 기본 문법을 알아보쟈

 

1. 설정

xmlns:th=" "

<html lang="en" xmlns:th="http://www.thymeleaf.org">

 

타임리프 th 속성을 사용하기 위해 선언된 네임 스페이스이다.

순수 html로만 이루어진 페이지인 경우 선언하지 않아도 된다.

 

2. 기본기능

th:text="${ }"

<div th:text="${data}"></div>

 

${ } 표현식을 사용해서 컨트롤러에서 전달받은 데이터에 접근할 수 있다.

 

th:href="@{ }"

<body>
  <a th:hrf="@{/boardListPage?currentPageNum={page}}"></a>
</body>

 

<a> 태그의 href 속성과 동일하다.

괄호 안에 클릭시 이동하고자하는 url을 입력하면 된다.

 

th:with="${ }"

<div th:with=”userId=${number}” th:text=”${usesrId}”>

 

변수 형태의 값을 재정의하는 속성이다.

즉, th:with을 이용하여 새로운 변수값을 생성할 수 잇다.

 

 th:value="${}"

<input type="text" id="userId" th:value="${userId} + '의 이름은 ${userName}"/>

 

input의 value에 값을 삽입할 때 사용한다.

여러개의 값을 넣을 땐 + 기호를 사용한다.

 

3. Form

예시

<body>
  <form th:action="@{/join}" th:object="${joinForm}" method="post">
    <input type="text" id="userId" th:field="*{userId}" >
    <input type="password" id="userPw" th:field="*{userPw}" >
  </form>
</body>

 

th:action="@{ }"

<form> 태그 사용시, 해당 경로로 요청을 보낼 때 사용한다.

 

th:object="${ }"

<form> 태그에서 데이터를 보내기 위해 Submit을 할 때 데이터가 th:object 속성을 통해 object에 지정한 객체에 값을 담아 넘긴다. 이때 값을 th:field 속성과 함께 사용하여 넘긴다.

Controller와 View 사이의 DTO 클래스 객체라고 생각하면 된다.

 

th:field="*{ }"

th:object 속성과 함께 th:field를 이용해서 HTML 태그에 멤버 변수를 매핑할 수 있다.

th:field을 이용한 사용자 입력 필드는 id, name, value 속성 값이 자동으로 매핑된다.

th:object와 th:field는 Controller에서 특정 클래스의 객체를 전달받은 경우에만 사용 가능하다.

 

4. 조건문과 반복문

th:if="${ }", th:unless="${ }"

<span th:if="${userNum} == 1"></span> 
<span th:unless="${userNum} == 2"></span>

 

JAVA의 조건문에 해당하는 속성이다. 각각 if와 else를 뜻한다.

th:unless는 일반적인 언어의 else 문과는 달리 th:if에 들어가는 조건과 동일한 조건을 지정해야 한다.

 

th:each="변수 : ${list}"

<body>
  <li th:each="pageButton" : ${#numbers.sequece(paging.firstPage, paging.lastPage)}></li>
</body>

 

JSP의 JSTL에서 <c:foreach> 그리고 JAVA의 반복문 중 for문을 뜻한다.

${list}로 값을 받아온 것을 변수로 하나씩 가져온다는 뜻으로, 변수는 이름을 마음대로 지정할 수 있다.

 

 th:switch, th:case

<th:block th:switch="${userNum}"> 
  <span th:case="1">권한1</span> 
  <span th:case="2">권한2</span> 
</th:block>

 

JAVA의 switch-case문과 동일하다.

switch case문으로 제어할 태그를 th:block으로 설정하고 그 안에 코드를 작성한다.

userNum라는 변수의 값이 1이거나 2일때 동작하는 예제이다.

 

 

 

 

728x90

'Spring' 카테고리의 다른 글

[Spring Boot] Entity manager ? 영속성 컨텍스트 ?  (0) 2023.12.09
[Spring Boot] @Controller와 @RestController 차이 제대로 알기!  (1) 2023.12.05
[Spring Boot] Spring Boot 시작하기! (feat. 맥북유저)  (1) 2023.12.03
[Spring Boot] 의존성 주입?  (3) 2023.12.02
[Spring Boot] Java Bean vs Spring Bean  (1) 2023.12.02
'Spring' Related Articles more