html thymeleaf 예제

25 Sep 2023

java

Thymeleaf는 HTML 템플릿 엔진으로서, 서버 측에서 동적으로 HTML을 생성하고 표현하는 데 사용됩니다. 이 예제에서는 Thymeleaf를 사용하여 HTML 페이지에 데이터를 바인딩하는 방법을 보여줍니다.

의존성 추가

먼저, 프로젝트에 Thymeleaf 의존성을 추가해야 합니다. Maven을 사용하는 경우 pom.xml 파일에 다음과 같이 의존성을 추가합니다:

<dependencies>
  <!-- Thymeleaf 의존성 추가 -->
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
  </dependency>
</dependencies>

Gradle을 사용하는 경우 build.gradle 파일에 다음과 같이 의존성을 추가합니다:

dependencies {
  // Thymeleaf 의존성 추가
  implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}

HTML 템플릿 작성

다음은 Thymeleaf를 사용하여 데이터를 바인딩하는 예제 HTML 템플릿입니다. Thymeleaf 태그와 속성은 th: 접두사로 시작합니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf 예제</title>
</head>
<body>
    <h1 th:text="${title}">기본 제목</h1>
    <p th:text="'안녕하세요, ' + ${name} + '님!'">인사말</p>
</body>
</html>

위의 예제는 <h1> 요소의 텍스트를 ${title} 변수의 값으로 대체하고, <p> 요소의 텍스트를 '안녕하세요, ' + ${name} + '님!' 표현식의 결과로 대체합니다.

컨트롤러 작성

Thymeleaf를 사용하여 데이터를 전송하기 위해 컨트롤러를 작성해야 합니다. 다음은 Spring Boot에서 Thymeleaf 컨트롤러를 작성하는 예제입니다:

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class MyController {

    @GetMapping("/")
    public String myMethod(Model model) {
        model.addAttribute("title", "Thymeleaf 예제");
        model.addAttribute("name", "사용자 이름");
        return "example";
    }
}

위의 예제에서는 myMethod라는 메서드가 @GetMapping("/") 어노테이션에 의해 “/” 경로로 매핑됩니다. Model 객체를 사용하여 데이터를 전달하고, “example”이라는 문자열을 리턴하여 example.html 템플릿을 렌더링합니다.

위의 예제 코드를 프로젝트에 추가하면 Thymeleaf를 사용하여 HTML 템플릿에 데이터를 바인딩하는 예제를 구현할 수 있습니다.

#Thymeleaf #HTML