Thymeleaf 를 알아보자
Thymeleaf는 JSP를 대신하는 목적으로 작성된 라이브러리
1. Thymeleaf 의존성 추가하기
먼저 Thymeleaf를 사용하려면 의존성 추가를 해줘야한다.
Springboot 3.2.2버전 , JDK 17버전을 사용하고 있으며, gradle을 사용하여 build.gradle에
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
위의 의존성을 추가해준 후 Thymeleaf를 사용할 수 있다.
2. html양식에 네임스페이스에 Thymeleaf 지정하기
아래와 같이 html의 양식을 수정하여 thymeleaf문법을 사용할 수 있다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.ort"> //thymeleaf를 네임스페이스(xmlns)에 지정해줘야함
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 th:text="${msg}"></h1> //네임스페이스에 thymeleaf를 지정해줬다면 'th:'와 같은 thymeleaf 기능을 사용할 수 있다.
</body>
</html>
th:text="${ }"는 ${ }안의 변수명을 출력해주는 기능이다.
${ }는 Controller에서 model.addAttribute("msg" , "안녕하세요~~"); 의 model을 전달 받아서
전달 받은 msg를 ${ }안에 넣어줘서 th:text="${msg}"를 작성하여 Controller에서 msg에 저장 된 "안녕하세요~~"를
출력한다.
지금은 <h1 th:text="${msg}"></h1> 의 ${msg}가 지정이 안되어 있어서 출력이 되지 않는다.
3번 주제에서 ${msg}를 Controller에서 model로 받아와보자.
3. Controller에 변수명 지정해서 넘겨주고 출력하기
@Controller
public class TestController {
@GetMapping("/ex/ex01")
public void ex01(Model model) {
model.addAttribute("msg", "안녕하세요~~");
}
일단 test로 TestController라는 controller클래스를 만들고, 이 클래스가 controller클래스임을 지정하기 위해 @Controller어노테이션을 써줬다.
그리고 @GetMapping("/ex/ex01")을 통해 ex01 메서드의 접속 경로를 설정 해주었다.
주소창에 localhost:8080/ex/ex01을 입력하면 해당 경로의 html파일이 웹사이트에 열리게된다.
지금은 쉽게 설명하기 위해 ex01메서드의 반환타입을 void로 해주었는데, 이런 경우 @GetMapping("/ex/ex01")의 경로를 따라서 해당 메서드와 연결 시키려는 HTML파일의 경로 또한 resources/templates/ex 폴더안의 ex01.html로 생성해줘야 한다.
만약 @GetMapping("/ex/ex01")의 경로와 같은 경로로 사용하기 싫다면 아래와 같이 반환타입 void대신 String을 사용하여 return을 통해 HTML경로를 연결시켜주면 된다.
@Controller
public class TestController {
@GetMapping("/ex/ex01")
public String ex01(Model model) {
model.addAttribute("msg", "안녕하세요~~");
return "ex01";
}
반환타입 String을 통해 return "ex01";을 작성 후 resources/templates 안의 ex01.html파일을 생성하면 @GetMapping("/ex/ex01") 에 지정된 resources/templates/ex/ex01.html의 경로가 아닌 resources/templates/ex01.html의 경로로 사용된다. 즉, @GetMapping에 지정된 경로가 아닌 return에 지정된 경로로 model값이 전달되며, 브라우저 주소창 URL에 localhost:8080/ex/ex01을 입력하면 ex01.html로 접속된다.
model.addAttribyte("msg", "안녕하세요~~"); 는 안녕하세요~~라는 문자열을 msg에 담아서 화면단(html)로 전달 해주겠다는 것이다.
이 때 msg는 화면단으로 전달 되며 "안녕하세요~~"라는 문자열을 가진 변수명이 되며,
이 msg변수명을 ${msg}에 담아서 Thymeleaf문법의 출력문인 th:text="${msg}"를 사용하여 안녕하세요~~라는 문자열을
출력할 수 있게 된다.
** 출력하는 방법은 2가지가 있다. ( 1. th:text="${msg}" / 2. [[${msg}]] )
지금까지 설명한 th:text="${msg}"를 이용하는 방법이 있고, 또 한가지는 [[${msg}]]를 사용해서 출력하는 방법이 있다.
이 경우에는 th:text를 굳이 안쓰고 [[${msg}]]를 사용할 수 있다.
그러나 th:text="${msg}"를 사용해주는 것을 권장한다고 한다.
4. 자주 쓰이는 Thymeleaf 문법
th:text를 이용한 출력하기
th:text = "${msg}"
- msg변수에 담긴 값을 출력하는 기능
th:with를 이용한 변수 선언
<div th:with="num1 = ${10}, num2 = ${20}">
<h4 th:text="${num1 + num2}"> <h4>
</div>
- th:with="변수명1=${값1} , 변수명2=${값2}" // ' , ' 콤마를 사용해서 여러 개의 변수를 선언할 수 있다.
- 위의 코드상에서는 <div>태그 안에 있는 부분에서만 임시 변수가 설정이 된다.
- th:text="${num1+num2}"를 작성하면 num1 변수에 저장된 숫자 10, num2 변수에 저장된 숫자20이 더해져서 결과적으로 30이 나온다.
Thymeleaf를 활용한 반복문과 제어문 / 링크처리, 인라인처리 ,레이아웃 구성하는 방법 들은 2/3 편에서 더 설명해보겠다.
'Springboot > Thymeleaf' 카테고리의 다른 글
| Thymeleaf 3/3 (1) | 2024.02.06 |
|---|---|
| Thymeleaf 2/3 (1) | 2024.02.04 |