2022. 5. 4. 00:39ㆍ자바 & Spring
타임리프(thymeleaf)
타임리프는 스프링에서 공식적으로 지원하는 view template으로, 백엔드 서버에서 HTML을 동적으로 렌더링 하는 용도로 사용된다. 대표적인 다른 뷰 템플릿은 jsp가 있다.
특징
1. 서버 사이드 HTML 렌더링 (SSR)
- 타임리프는 백엔드 서버에서 html을 동적으로 렌더링한다.
2. 네츄럴 템플릿
- 타임리프는 순수 HTML 을 유지한다. 따라서 웹 브라우저에서 서버를 거치지 않고도 열수 있다. 서버를 통해 뷰 템플릿을 거치면 동적으로 바뀐 결과를 확인할 수 있다.
- JSP는 서버를 거치지 않고서는 웹 브라우저에서 정상적으로 html파일을 확인할 수 없다. 반면 타임리프로 작성된 파일은 웹 브라우저에서 열어도 정상적으로 HTML을 표시한다.
- 이렇듯 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 Natural Template 이라고 한다.
3. 스프링 통합 지원
- 타임리프는 스프링과 자연스럽게 통합, 다양한 기능을 제공한다.
타임리프 선언
html에 다음과 같이 쓰면 타임리프를 사용할 수 있다.
<html xmlns:th="http://www.thymeleaf.org">html을 작성하되, th: 를 덧붙여 동적으로 제공하고자 하는 부분을 설정할 수 있다.
Spring 프로젝트 패키지에서 resources/templates/ 경로에 html 파일을 생성해야 한다.
HTML에 컨텐츠를 출력할 때에는 `th:text` 를 사용한다.
`th:utext`는 HTML의 이스케이프 기능을 사용하지 않게 출력하는 것을 의미한다.
<span th:text="${data}"></span>
<span th:utext="${data}"></span><span></span> 사이에 Model 객체에서 넣은 data값을 불러와 치환한다. (동적 생성)
`th:text` 없이 직접 출력하려면 [[${data}]] 를 사용한다.
[(${data})] 는 이스케이프 기능을 사용하지 않는다.
<li>직접 출력하기 = [[${data}]]</li>
<li>직접 출력하기 = [(${data})]</li>
SpringEL 표현식
변수표현식: ${....}
타임리프에서 변수를 사용할 때는 변수표현식을 사용한다.
예시)
아래와 같이 Student 클래스가 있고, 일반 Student 객체, ArrayList, HashMap에서 어떻게 활용하는지 알아보자.
@Data
static class Student{
private String name;
private int age;
public User(String name, int age) {
this.name = name;
this.age = age;
}
}
이제 각각 list, map에 Student객체들을 넣고 model객체에 3가지를 집어넣는다.
@GetMapping("SpringEL")
public String variable(Model model){
Student studentA = new Student("A", 20);
Student studentB = new Student("B", 25);
List<User> list = new ArrayList<>();
list.add(studentA); list.add(studentB);
Map<String, User> map = new HashMap<>();
map.put("studentA", studentA); map.put("studentB", studentB);
model.addAttribute("student", studentA);
model.addAttribute("students", list);
model.addAttribute("studentMap", map);
return "basic/variable";
}
Model에 있는 값들을 꺼내 thymeleaf 에서 표현하는 방법은 다음과 같다.
아래 값들의 결과는 모두 studentA 가 나오게 된다.
th:text="${student.name}"
th:text="${student['name']}"
th:text="${student.getName()}"
th:text="${students[0].name}"
th:text="${students[0]['name']}"
th:text="${students[0].getName()}"
th:text="${studentMap['studentA'].name}"
th:text="${studentMap['studentA']['name']}"
th:text="${studentMap['studentA'].getName()}"
원래는 student.getName()을 불러와야 하지만 프로퍼티 접근법으로 student.name, student['name'] 이라고 표기해도 getName() 으로 값을 가져온다. 물론 직접 메서드를 호출해서도 가져올 수 있다.
지역변수
th:width 을 사용해 지역 변수를 선언해 사용할 수 있다. 선언한 태그 안에서만 사용 가능하다.
<div th:with="first=${students[0]}">
<p>처음 학생의 이름: <span th:text="${first.name}"></span></p>first 에 students[0] 이 담긴다.
타임리프는 다음과 같은 객체들도 제공한다.
${#request} ${#response} ${#session} ${#servletContext} ${#locale}
#request , #response 에는 HttpServletRequest, Response 객체가 그대로 들어가기 때문에 조회하려면 request.getParameter("") 와 같이 조회해야 한다. 편의성을 높이기 위해 타임리프는 다음과 같이 쓰는 것도 가능하다.
http 요청 파라미터 접근: param
http 세션 접근: session
스프링 빈 접근: @
ex) ${param.paramData}, ${session.sesionData}, @helloBean.hello() 와 같이 사용하면 된다.
위와 같이 paramData라는 쿼리 파라미터를 작성해, 다음과 같은 url로 요청이 들어왔다고 하자.
<li><a href="/thymeleaf/basic?paramData=HelloParam">타임리프 기본 객체들</
a></li>
html 페이지에서 paramData 를 다음과 같이 꺼낼 수 있다.
<li>Request Parameter = <span th:text="${param.paramData}"></span></li>
물론 #{request.getParameter("paramData")} 로 꺼내도 된다.
세션의 경우도 마찬가지이다.
@GetMapping("/thymeleaf/basic")
public String basicObjects(HttpSession session){
session.setAttribute("sessionData", "Session a b c d");
return "basic/basic-pages";
}
이제 basic-pages 라는html 파일에서 sessionData를 다음과 같이 꺼내 쓸 수 있다.
<li>session = <span th:text="${session.sessionData}"></span></li>
출처: Thymeleaf
Thymeleaf
Integrations galore Eclipse, IntelliJ IDEA, Spring, Play, even the up-and-coming Model-View-Controller API for Java EE 8. Write Thymeleaf in your favourite tools, using your favourite web-development framework. Check out our Ecosystem to see more integrati
www.thymeleaf.org
'자바 & Spring' 카테고리의 다른 글
| 빈 생명주기 콜백 (0) | 2022.10.26 |
|---|---|
| 컴포넌트 스캔, 의존관계 자동 주입 (2) | 2022.09.25 |
| 싱글톤(singleton) 패턴 (0) | 2022.09.24 |
| Spring 특징과 장점 (0) | 2022.09.17 |
| JUnit 단위 테스트 (0) | 2022.09.07 |