타임리프
- 공식사이트
- 흔히 "뷰 템플릿"이라고 칭한다.
- html 태그에 속성을 붙여 페이지에 동적으로 값을 추가하거나 처리 할 수 있게 해준다.
타임리프 특징
- 서버 사이드 렌더링(SSR)
- 백엔드 서버에서 HTML을 동적으로 렌더링 하는 용도로 사용
- 네츄럴 템플릿
- 가장 큰 특징으로 순수 HTML을 최대한 유지하는 특징
- 스프링 통합지원
- 타임리프는 스프링과 매우 잘 맞는다.
사용법
- 타임리프를 사용하려면 기본적인 선언이 필요한데 아래와 같다.
<html xmlns:th="http://www.thymeleaf.org">- html태그에 공식 사이트 링크를 넣어주는 선언이다.
텍스트 - text, utext
- 타임리프의 가장 기본 기능 : 텍스트 출력
- 타임리프는 기본적으로 HTML 태그의 속성에 기능을 정의해서 동작한다.
- HTML의 콘텐츠(content)에 데이터를 출력할 때는 다음과 같이
th:text를 사용하면 된다<span th:text="${data}">
- HTML 테그의 속성이 아니라 HTML 콘텐츠 영역안에서 직접 데이터를 출력하고 싶으면 다음과 같이
[[...]]를 사용하면 된다.
예시
Controller 예시
- controller에서
model안에 data변수에 "hello gloom!" 이라고 추가해주고 뷰템플릿을 호출해준다.
public class BasicController {
@GetMapping("text-basic")
public String textBasic(Model model){
model.addAttribute("data", "hello gloom!");
return "basic/text-basic";
}
}
html 예시
- 상단에 타임리프를 선언해줬다.
<html xmlns:th="http://www.thymeleaf.org"> - 그리고 body 안에 하나는
th:text=${변수}다른 하나는[[${변수}]]를 입력했다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>컨텐츠에 데이터 출력하기</h1>
<ul>
<li>th:text 사용 = <span th:text="${data}"></span></li>
<li>컨텐츠 안에서 직접 출력 = [[${data}]]</li>
</ul>
</body>
</html>
주의사항
- html 화면을 생성할 때, 출력하는 데이터(위에서는 data변수)에
<``>이런 특수 문자가 있는 것은 주의해야한다. - 웹 브라우저는
<를 HTML 태그의 시작으로 인식한다.- 그래서
<를 테그의 시작이 아니라 문자로 표현할 수 있는 방법이 필요한데, 그 방법으로HTML 엔티티가 있다. HTML에서 사용하는 특수문자->HTML 엔티티의 과정을 이스케이프(escape)라고 한다.
- 그래서
- 당연히,
th:text,[[]]은 이스케이프를 제공한다.<-><>->>
- 이렇게 문자를 굵게만드는
<b></b>태그를 문자로 인식하게 만든다.
이러한 문제를 어떻게 해결할까?
escape 기능을 사용하지 않으려면 어떻게 해야할까?
Unescape
- 방법은 간단하다.
th:text->th:utext[[...]]->[(...)]
확인해보기
반복되는 부분은 생략하고,
<body>~</body>안에 만 입력하였다.
<h1>text 와 utext</h1>
<ul>
<li>th:text 사용 = <span th:text="${data}"></span></li>
<li>th:utext 사용 = <span th:utext="${data}"></span></li>
</ul>
<h1><span th:inline="none">[[]] 와 [()]</span></h1>
<ul>
<li>escaped = [[${data}]]</li>
<li>unEscaped = [(${data})]</li>
</ul>
<b></b>가 잘 적용됨을 확인할 수 있었다.
참고링크
한단계씩 올라가는 개발자