본문 바로가기

Spring Boot

[SpringBoot] Contoller와 View의 데이터 전달 : Thymeleaf 템플릿

1. Contoller

Contoller 에서 Model 을 이용하여 데이터를 View 로 전달한다. addAttribute 메서드를 이용하는 데, 첫 번째 파라미터는 변수명, 두 번째 파라미터는 값을 나타낸다. return 하는 값은 View 의 파일명이다.

@Controller
public class HelloController {
    @GetMapping("hello")
    public String hello(Model model) {
        model.addAttribute("data", "hello!!!");
        return "hello";
    }
}

2. hello.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p th:text="'하이 ' + ${data}">안녕하세요, 손님</p>
</body>
</html>

Thyemleaf 템플릿 엔진을 이용하기 위해선 xml 네임 스페이스를 명시해야 한다. html 태그를 열고 xmlns:th="http://www.thymeleaf.org" 을 추가해야 th:text 와 같은 템플릿 기능을 사용할 수 있다.

 

- th:text : Controller 에서 넘어온 데이터를 ${} 형태로 출력한다. 여기서 중괄호 {} 안에는 모델 어트리뷰트의 변수명이 들어간다. 

 

타임리프의 장점은 html 파일 자체만으로 파일을 열 수 있다는 것이다. 태그의 형태를 유지하기 때문에 넘어온 데이터없이 그냥 순수 html 파일을 열면 태그 안에 있는 '안녕하세요, 손님'이 브라우저에 출력된다.

3. 폴더 구조

폴더 구조

스프링 부트에서는 타임리프 라이브러리를 추가해주면 알아서 resources 의 파일에서 해당 파일명을 찾아 브라우저에 뿌려주기 때문에 굉장히 편리하다. resources > static 폴더에는 정적 페이지, templates 폴더에는 thymeleaf 와 같이 템플릿을 이용한 동적 페이지로 구성한다.