본문 바로가기
Thymeleaf

12. Thymeleaf의 객체와 컨트롤러와의 상호작용 - 2

by leo2114 2024. 2. 24.
반응형

객체와 속성 접근

Thymeleaf에서는 객체와 속성에 접근하여 동적으로 데이터를 표시할 수 있습니다. 이번 챕터에서는 Thymeleaf에서 객체와 속성에 접근하는 방법에 대해 알아보겠습니다.

1. 객체 접근

Thymeleaf에서는 객체를 접근할 때 도트(.)를 사용하여 속성에 접근합니다. 객체의 속성을 가져오기 위해서는 객체명.속성명 형식으로 작성합니다.

public class User {
    private String username;
    private String email;

    // Getters and setters
}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>User Profile</title>
</head>
<body>
    <h1>User Profile</h1>
    <p th:text="${user.username}">Username</p>
    <p th:text="${user.email}">Email</p>
</body>
</html>

 

위의 예제에서는 User 객체의 username과 email 속성에 접근하여 해당 값을 출력하고 있습니다.

2. 컬렉션 속성 접근

컬렉션 속성에 접근할 때는 반복문을 사용하여 각 요소에 접근합니다.

public class Article {
    private String title;
    private String content;

    // Getters and setters
}

public class Blog {
    private List<Article> articles;

    // Getters and setters
}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Blog</title>
</head>
<body>
    <h1>Recent Articles</h1>
    <ul>
        <li th:each="article : ${blog.articles}">
            <h2 th:text="${article.title}">Title</h2>
            <p th:text="${article.content}">Content</p>
        </li>
    </ul>
</body>
</html>

 

위의 예제에서는 Blog 객체의 articles 속성에 접근하여 각 Article 객체의 title과 content 속성을 출력하고 있습니다.

3. 코드 예제

다음은 객체와 속성에 접근하는 Thymeleaf 템플릿의 간단한 예제입니다.

@Controller
public class MyController {

    @GetMapping("/userProfile")
    public String userProfile(Model model) {
        User user = new User();
        user.setUsername("john_doe");
        user.setEmail("john@example.com");
        model.addAttribute("user", user);
        return "userProfile";
    }

    @GetMapping("/blog")
    public String blog(Model model) {
        Blog blog = new Blog();
        List<Article> articles = new ArrayList<>();
        articles.add(new Article("First Article", "Content of first article"));
        articles.add(new Article("Second Article", "Content of second article"));
        blog.setArticles(articles);
        model.addAttribute("blog", blog);
        return "blog";
    }
}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>User Profile</title>
</head>
<body>
    <h1>User Profile</h1>
    <p th:text="${user.username}">Username</p>
    <p th:text="${user.email}">Email</p>
</body>
</html>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Blog</title>
</head>
<body>
    <h1>Recent Articles</h1>
    <ul>
        <li th:each="article : ${blog.articles}">
            <h2 th:text="${article.title}">Title</h2>
            <p th:text="${article.content}">Content</p>
        </li>
    </ul>
</body>
</html>

 

위의 예제에서는 컨트롤러에서 생성된 User 객체와 Blog 객체에 접근하여 Thymeleaf로 전달하는 방법을 보여주고 있습니다. 객체와 속성에 접근하는 것은 Thymeleaf의 강력한 기능 중 하나이며, 동적인 웹 페이지를 생성하는 데 매우 유용합니다.

반응형