Thymeleaf
타임리프는 흔히 View Template(뷰 템플릿)이라고 부른다
뷰 템플릿은 컨트롤러가 전달하는 데이터를 이용하여 동적으로 화면을 구성할 수 있게 해준다
JSP와 Thymeleaf 차이점
- JSP : 기존 MVC 패턴 방식에서 주로 사용. JSP는 HTML 코드 안에 자바 코드를 직접 작성할 수 있다. 서블릿 이라는 형태로 변환되어 실행. 서블릿이 자바 소스이다 보니 HTML 코드에서 JAVA 코드를 넣어 동적 웹페이지를 구성한다. JSP는 서버 사이드에서 모든 로직을 처리하므로, 자바 코드와 HTML이 섞여 복잡해지기 쉽다. 복잡한 로직을 뷰에 넣는 경우 유지보수가 어려워질 수 있다.
- Thymeleaf : HTML, JS, CSS 등을 처리할 수 있는 웹 및 독립형 환경에서 사용이 가능한 java 템플릿 엔진. 서블릿으로 변환되지 않기 때문에 비즈니스 로직이 완전히 분리된다. 자바 코드를 직접 넣는 대신, HTML 속성에 표현식을 사용하여 데이터를 렌더링한다. 자바 코드를 분리하고 HTML 구조를 유지하려는 장점이 있다. 페이지를 생성하는데 필요한 정보를 태그의 속성으로 넣을 수 있어 유지보수가 간단하다. 타임리프는 뷰와 로직을 분리해주어 가독성이 좋고 유지보수가 용이하다. 또한, HTML 파일이 그대로 유지되므로 프론트엔드 개발자와 백엔드 개발자 간의 협업이 더 쉽다.
Spring boot Thymeleaf 적용 방법
스프링 부트에서는 기본적으로 src/main/resources/templates/ 폴더 안에 있는 .html 파일을 템플릿으로 사용
1) Maven 의존성 추가
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2) Gradle 의존성 추가
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
타임리프 주요 기능
1) 변수 표현
타임리프에서 ${}를 사용하여 자바 객체의 데이터를 참조
<p th:text="${user.name}">이름</p>
<!--user라는 객체에서 name 속성을 가져와 HTML에 출력-->
2) 반복 처리
th:each를 사용하여 리스트나 배열 순회
<ul>
<li th:each="user : ${users}" th:text="${user.name}">사용자 이름</li>
</ul>
<!-- th:each="user : ${users}"는 users라는 리스트의 각 요소를 user로 참조하며 반복 -->
3) 조건문 처리
th:if를 사용하여 조건에 따라 내용 표시
<p th:if="${user.admin}">관리자입니다.</p>
<p th:unless="${user.admin}">일반 사용자입니다.</p>
4) URL 생성
th:href를 사용하여 동적으로 URL 생성
<a th:href="@{/users/{id}(id=${user.id})}">사용자 페이지로 이동</a>
<!-- /users/{id} 형태의 URL을 동적으로 생성 -->
5) 기본 값
값이 존재하지 않을 때 기본 값을 설정
<p th:text="${user.name ?: '이름 없음'}">이름</p>
<!--user.name이 존재하지 않을 경우 '이름 없음'을 출력 -->
타임리프 템플릿 레이아웃
타임리프는 템플릿을 상속받는 방식으로 레이아웃을 구성할 수 있다. th:include나 th:replace를 사용하여 공통 레이아웃을 정의하고 여러 페이지에서 사용할 수 있다.
1) 공통 레이아웃 설정
예시) layout.html이라는 공통 레이아웃 설정
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="${title}">기본 타이틀</title>
</head>
<body>
<header>공통 헤더</header>
<div th:include="~{::content}"></div>
<footer>공통 푸터</footer>
</body>
</html>
2) 상속받는 템플릿
개별 페이지에서 레이아웃을 상속받아 사용할 수 있음
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="layout :: content">
<head>
<title>페이지 타이틀</title>
</head>
<body>
<h1>여기에 개별 페이지 내용이 들어갑니다.</h1>
</body>
</html>'FRONT' 카테고리의 다른 글
| REACT :: 라우터 경로 이동 시 페이지 최상단 이동 (0) | 2024.08.11 |
|---|---|
| HTML :: 블록과 인라인 (0) | 2024.05.11 |
| HTML 링크 (0) | 2024.05.11 |
| HTML box model (0) | 2024.05.11 |
| HTML 작성 법과 태그 </> (0) | 2024.05.11 |
