[TIL] 타임리프(Thymeleaf)란?

냠냠빈·2024년 12월 18일

Thymeleaf html 타임리프 템플릿 엔진

📚📆 프로그래머스 백엔드 부트캠프 TIL

목록 보기

16/28

🌿 Spring Boot와 Thymeleaf: 완벽 정리 가이드

🌱 Thymeleaf란?

Thymeleaf(타임리프)는 Java 기반 템플릿 엔진으로, 서버에서 HTML, XML, JavaScript, CSS 등을 렌더링하여 화면을 동적으로 처리하는 데 사용됩니다.

Spring Boot와의 강력한 통합으로 웹 애플리케이션 개발에 널리 사용됩니다.
타임리프는 순수 HTML 파일을 기반으로 하여 웹 브라우저에서 정적 페이지처럼 미리 확인할 수 있는 장점이 있습니다.

더 자세한 내용은 공식 웹사이트에서 확인 가능합니다.
Thymeleaf 공식 웹사이트

🔍 템플릿 엔진이란?

템플릿 엔진(Template Engine)은 동적인 웹 페이지를 생성하기 위한 도구로, 서버에서 데이터를 처리하고 이를 기반으로 HTML, XML 등의 텍스트 파일을 자동으로 생성하는 역할을 합니다. 템플릿 엔진은 HTML 파일 내에 변수나 제어문을 삽입하여 동적으로 내용을 채울 수 있게 해줍니다.

템플릿 엔진의 주요 기능

데이터 삽입: 서버에서 받은 데이터를 템플릿 파일 내에 동적으로 삽입합니다.
조건문과 반복문: 특정 조건에 따라 HTML을 렌더링하거나, 데이터를 반복하여 출력하는 기능을 제공합니다.
코드와 뷰 분리: 비즈니스 로직과 UI를 분리하여, 유지보수와 코드 재사용성을 높입니다.

예시

템플릿 엔진을 사용하면 다음과 같은 HTML 파일을 작성할 수 있습니다:

<h1>Welcome, {{ user.name }}!</h1>
<p>Your email is: {{ user.email }}</p>

위와 같은 템플릿에서 {{ user.name }}와 {{ user.email }}은 서버에서 전달한 데이터를 동적으로 채울 부분입니다. 템플릿 엔진은 서버에서 데이터를 받아 이를 HTML 코드로 변환해 클라이언트에게 전달합니다.

대표적인 템플릿 엔진으로는 Thymeleaf, Freemarker, Velocity 등이 있으며, Spring Boot에서는 기본적으로 Thymeleaf를 사용합니다.

템플릿 엔진	특징	사용 언어
JSP	Servlet 기반, 유지보수 어려움	Java
Freemarker	간단하고 빠르지만 복잡한 표현식 처리 제한	Java
Velocity	XML 기반, 표현식이 상대적으로 단순	Java
Thymeleaf	순수 HTML 지원, Spring과 강력한 통합, 유지보수 쉬움	Java

Thymeleaf는 다른 템플릿 엔진과 달리 HTML의 태그와 속성을 그대로 사용하면서 서버 데이터를 렌더링합니다.

✨ Thymeleaf의 주요 특징

순수 HTML 문서와의 호환성
- 타임리프 파일은 브라우저에서 정적 페이지처럼 열어볼 수 있습니다.
Spring MVC와 완벽한 통합
- Spring Boot의 뷰 리졸버(ViewResolver)를 통해 자동으로 뷰를 연결합니다.
  
  Spring MVC는 Spring Framework에서 웹 애플리케이션을 구축할 때 사용되는 아키텍처로, 요청(Request)을 처리하고 응답(Response)을 생성하는 데 필요한 다양한 컴포넌트를 제공합니다. Spring MVC와 Spring Boot는 자연스럽게 통합되며, Spring Boot는 설정을 최소화하고 자동 구성을 통해 Spring MVC를 쉽게 사용할 수 있도록 도와줍니다.
  
  Spring MVC와 Spring Boot의 통합 과정에서 중요한 부분은 뷰 리졸버(View Resolver) 입니다. 이를 통해 요청에 대한 적절한 뷰를 자동으로 찾아서 반환합니다.
템플릿 재사용성
- 템플릿 프래그먼트(fragment) 기능을 활용하여 재사용 가능한 컴포넌트를 만들 수 있습니다.
직관적인 문법
- 타임리프는 속성 기반 문법을 사용하여 가독성이 뛰어납니다.

🛠️ 타임리프 주요 속성 종류

속성	설명	예시
`th:text`	HTML 태그 안에 텍스트를 출력	`<p th:text="${data}"></p>`
`th:utext`	HTML 태그 안에 HTML 코드를 출력	`<p th:utext="${html}"></p>`
`th:if`, `th:unless`	조건부 렌더링 (if / unless 조건 처리)	`<p th:if="${condition}">`
`th:each`	반복문 처리	`<li th:each="item : ${list}">`
`th:href`	링크의 URL 처리	`<a th:href="@{/path}"></a>`
`th:src`	이미지 등의 소스 경로 설정	`<img th:src="@{/img.png}">`
`th:replace`	다른 템플릿 프래그먼트 삽입	`<div th:replace="~{header}"></div>`
`th:include`	다른 템플릿 내용을 포함	`<div th:include="~{footer}"></div>`

📝 타임리프 사용법 및 예시 코드

1) 기본 설정
Spring Boot 프로젝트에 타임리프를 설정하는 방법입니다.
build.gradle 또는 pom.xml에 타임리프 의존성을 추가합니다.

Gradle

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

2) 컨트롤러 예시

@Controller
public class ExampleController {
    @GetMapping("/hello")
    public String hello(Model model) {
        model.addAttribute("name", "스마일러");
        return "hello"; // hello.html 템플릿 호출
    }
}

3) Thymeleaf 템플릿 (hello.html)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>타임리프 예제</title>
</head>
<body>
    <h1 th:text="'안녕하세요, ' + ${name} + '님!'"></h1>
</body>
</html>

출력 결과: "안녕하세요, 스마일러님!"

🔄 타임리프 표현식

타임리프는 다양한 표현식을 제공하여 데이터를 동적으로 렌더링합니다.

표현식	설명	예시
`${...}`	변수 표현식	`${name}`
`*{...}`	선택 변수 표현식	`*{field}`
`@{...}`	URL 표현식	`@{/path/{id}(id=${id})}`
`#{...}`	메시지 표현식	`#{label.welcome}`
`~{...}`	템플릿 레이아웃 표현식	`~{layout :: fragment}`

⚠️ 타임리프 작성 시 주의사항

타임리프 문법과 HTML 문법 충돌 방지
- 타임리프는 속성을 추가하는 방식이므로 기존 HTML 문법과 잘 어울립니다.
NPE(Null Pointer Exception) 주의
- 타임리프는 값이 null이면 빈 문자열로 처리하지만, 객체의 프로퍼티에 접근할 때는 NPE가 발생할 수 있으니 주의해야 합니다.
템플릿 캐싱
- 개발 환경에서는 캐싱을 끄고, 운영 환경에서는 캐싱을 활성화하여 성능을 최적화해야 합니다. 밑의 사진처럼 application.properties나 application.yml파일에 다음과 같이 cache: false로 작성하면 캐싱이 꺼집니다.

🖼️ Spring MVC와 뷰 리졸버 통합 과정

컨트롤러에서 뷰 이름 반환
Spring MVC에서 클라이언트의 요청을 처리하기 위해서는 먼저 컨트롤러를 설정합니다. 컨트롤러는 비즈니스 로직을 수행한 후 뷰 이름을 반환합니다. 예를 들어, @Controller가 붙은 클래스에서 메서드가 ModelAndView 객체나 뷰 이름을 반환할 수 있습니다.
@Controller
public class MyController {
    @GetMapping("/home")
    public String home(Model model) {
        model.addAttribute("message", "Hello, Spring MVC!");
        return "home"; // 뷰 이름
    }
}
뷰 리졸버(View Resolver) 설정
Spring Boot는 기본적으로 InternalResourceViewResolver를 설정합니다. 이 뷰 리졸버는 반환된 뷰 이름을 기반으로 실제 JSP, HTML 파일 등과 같은 뷰를 찾습니다. 예를 들어, home이라는 뷰 이름이 반환되면, Spring MVC는 src/main/resources/templates/home.html 또는 src/main/webapp/WEB-INF/jsp/home.jsp와 같은 위치를 찾아 뷰를 렌더링합니다.

템플릿 엔진 사용 (Thymeleaf 등)
Spring Boot에서는 기본적으로 Thymeleaf를 템플릿 엔진으로 지원하며, 이를 통해 동적인 HTML 페이지를 생성할 수 있습니다. 만약 home.html 파일을 반환하고 싶다면, 다음과 같이 설정합니다.

application.properties 파일에서 뷰 리졸버 설정을 자동으로 처리합니다.
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
Controller에서 반환하는 뷰 이름은 .html로 끝나지 않아도 Spring Boot가 자동으로 이를 처리합니다.

자동 구성 및 통합
Spring Boot는 Spring MVC의 DispatcherServlet을 자동으로 설정하고, 요청이 올 때마다 적절한 컨트롤러가 실행되도록 라우팅을 처리합니다. 이 과정에서 ViewResolver가 활성화되어 뷰를 찾고 렌더링합니다. 예를 들어, home이라는 뷰 이름이 반환되면, Spring Boot는 templates/home.html 파일을 자동으로 찾아서 렌더링합니다.