개발/🟩 Spring, Spring Boot

🟩 [Thymeleaf] 타임리프란?

비니_ 2025. 3. 7. 10:34
728x90

📌 타임리프란?

- 서버 사이드 템플릿 엔진으로, Java 웹 애플리케이션에서 주로 HTML, XML, JavaScript, 텍스트 파일 등을 동적으로 생성할 때 사용되는 라이브러리

- 주로 Spring Framework와 함께 많이 사용

 

📌 특징

 

  • 서버 사이드 템플릿 엔진
    • 클라이언트에게 HTML을 전달하기 전에 서버에서 템플릿을 처리하고, 데이터를 동적으로 주입한 후 완성된 HTML을 클라이언트에 전달함.
  • HTML5 호환
    • 타임리프는 HTML5를 완벽하게 지원하며, 템플릿 파일을 HTML 파일로 작성할 수 있어서 브라우저에서 바로 열어도 정적 페이지처럼 동작해.
  • 표현식 언어(Thymeleaf Expression Language)
    • 타임리프는 **th:text, th:if, th:each**와 같은 속성(attribute)을 통해 서버 데이터를 동적으로 삽입하고 조건부 로직, 반복 등을 처리할 수 있음.
  • HTML 템플릿을 그대로 사용할 수 있음
    • 타임리프는 템플릿 파일을 HTML로 그대로 사용하면서, 템플릿 내부에서 동적 컨텐츠를 삽입하거나 처리할 수 있어.
    • 서버 사이드 렌더링을 하면서도, 브라우저에서 바로 테스트해볼 수 있기 때문에 디자인과 개발을 병행할 때 편리해.
  • 데이터 바인딩
    • 변수, 객체, 리스트 등 다양한 데이터를 HTML 템플릿에 동적으로 바인딩하여 보여줄 수 있어.
    • 예를 들어, th:text, th:src, **th:href**와 같은 속성을 사용하여 데이터를 템플릿 내에서 사용할 수 있음.

 

📌 타임리프의 장점

  1. 빠르고 효율적: 타임리프는 성능이 좋고, HTML을 작성할 때 쉽게 오류를 방지할 수 있는 구조.
  2. 스프링과의 통합: Spring Boot와 완벽하게 통합되어, Model에 데이터를 바인딩하여 쉽게 사용할 수 있음.
  3. 기능이 풍부: 조건문, 반복문, 텍스트/속성 바인딩 외에도 URL 처리, 파일 처리, 인라인 스크립트 등 다양한 기능을 제공.
  4. 디버깅: 서버 사이드에서 렌더링하면서도 HTML로 결과를 바로 볼 수 있어 디버깅에 용이함.

 

📌 타임리프 사용 예시

  • 웹 페이지에서 동적으로 데이터를 삽입할 때
    로그인, 회원 가입, 게시판 등에서 데이터를 서버에서 처리한 후 HTML로 뷰를 제공할 때.
  • 다국어 지원 (i18n)
    메시지 리소스(messages.properties)를 이용하여 다국어 텍스트를 관리할 수 있어, 다양한 언어로 페이지를 제공하는데 유용.

 

- 타임리프는 Java 기반의 서버 사이드 템플릿 엔진으로, HTML을 동적으로 생성하고 Spring과의 통합에 강점을 가진 라이브러리
- React, Angular, Vue와 같은 프론트엔드 라이브러리와는 달리, 서버에서 렌더링된 HTML을 클라이언트에게 전달하는 방식으로 동작한다는 점에서 다르다!

 

 

✅ 예시코드 ✅

 

html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>타임리프 예시</title>
</head>
<body>
    <h1 th:text="'안녕하세요, ' + ${user.name} + '!'">사용자 이름</h1>
    <p th:text="'나이는 ' + ${user.age} + '세입니다.'">나이</p>

    <ul>
        <li th:each="item : ${items}" th:text="${item}">목록 항목</li>
    </ul>
</body>
</html>

 

  • th:text: 변수를 텍스트로 출력하는 속성.
  • ${user.name}: 서버에서 전달된 user 객체의 name 프로퍼티 값.
  • th:each: 반복문으로, items 리스트를 순회하여 각 항목을 출력.

 

java

public class User {
    private String name;
    private int age;

    // 기본 생성자
    public User(String name, int age) {
        this.name = name;
        this.age = age;
    }

    // getter 메서드
    public String getName() {
        return name;
    }

    public int getAge() {
        return age;
    }

    // setter 메서드 (필요한 경우)
    public void setName(String name) {
        this.name = name;
    }

    public void setAge(int age) {
        this.age = age;
    }
}



@Controller
public class UserController {
    
    @GetMapping("/welcome")
    public String welcome(Model model) {
        // 1. User 객체 생성
        User user = new User("홍길동", 30);
        
        // 2. 아이템 리스트 생성
        List<String> items = Arrays.asList("아이템1", "아이템2", "아이템3");
        
        // 3. 모델에 데이터 추가
        model.addAttribute("user", user);  // user 객체를 모델에 추가
        model.addAttribute("items", items);  // items 리스트를 모델에 추가
        
        // 4. Thymeleaf 템플릿으로 데이터 전달
        return "welcome";  // "welcome.html" 템플릿을 렌더링
    }
}

 

 

  • **user.name**이 "홍길동"일 경우, 출력은 안녕하세요, 홍길동!
  • **user.age**가 30일 경우, 출력은 나이는 30세입니다.
  • items 리스트를 순회하며 출력.

 

728x90