타임리프를 간단하게 mvc1 에서 했었고, 이번엔 타임리프에 대해서 자세하게 알아보자.
타임리프 특징 3가지
-
서버 사이드 렌더링
- 백엔드 서버에서 HTML을 동적으로 렌더링을 하느 용도로 사용된다.
-
네츄럴 템플릿
-
순수 HTML을 최대한 유지하는 특징
-
타임리프로 작성한 파일은 HTML을 유지하기 때문에 웹브라우저에서 파일을 직접 열어도 내용 확인이 가능
-
서버를 통해서 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인 가능.
-
네츄럴 템플릿이 특징인 이유 - JSP 를 포함한 다른 뷰 템플릿의 파일을 열 경우 -> JSP 코드와 HTML 코드가 뒤죽박죽 섞여서 정상적인 HTML 결과를 확인 할 수 없음. - JSP는 무조건 서버를 통해서 JSP 가 렌더링이 되고 HTML 응답결과 화면을 확인할 수 있다. - 렌더링이 되지 않으면 뭘 어떻게 만들었는지 확인이 불가능. 이런 점에서 네츄럴 템플릿이 순수 HTML을 그대로 유지하면서 웹 브라우저를 통해서 마크업 결과를 확인 할 수 있다는 것이 큰 장점.
-
-
스프링 통합 지원
- 타임리프는 스프링과 자연스럽게 통합 + 다양한 기능을 편리하게 사용할 수 있게 지원.
타임리프 기본기능
기본 표현식들
• 간단한 표현:
◦ 변수 표현식: ${...}
◦ 선택 변수 표현식: *{...}
◦ 메시지 표현식: #{...}
◦ 링크 URL 표현식: @{...}
◦ 조각 표현식: ~{...}
• 리터럴
◦ 텍스트: 'one text', 'Another one!',…
◦ 숫자: 0, 34, 3.0, 12.3,…
◦ 불린: true, false
◦ 널: null
◦ 리터럴 토큰: one, sometext, main,…
• 문자 연산:
◦ 문자 합치기: +
◦ 리터럴 대체: |The name is ${name}|
• 산술 연산:
◦ Binary operators: +, -, *, /, %
◦ Minus sign (unary operator): -
• 불린 연산:
◦ Binary operators: and, or
◦ Boolean negation (unary operator): !, not
• 비교와 동등:
◦ 비교: >, <, >=, <= (gt, lt, ge, le)
◦ 동등 연산: ==, != (eq, ne)
• 조건 연산:
◦ If-then: (if) ? (then)
◦ If-then-else: (if) ? (then) : (else)
◦ Default: (value) ?: (defaultvalue)
• 특별한 토큰:
◦ No-Operation: _텍스트 - text, utext
-
기본 기능인 텍스트 출력 기능
-
<span th:text="${data}"> -
데이터 출력시 th:text를 사용하면됨.
-
HTML 콘텐츠 영역안에서 직접 데이터를 출력하고 싶은 경우 [[]] 를 사용
- [[..]] -> 인라인 리터럴 텍스트 문법
- 텍스트가 HTML 에 그대로 표시하도록 할 수 있습니다.
<!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>th:text의 경우 html 원본 정보를 보게 될 경우
밑의 직접 데이터를 출력하는 경우 helloSpring이 직접 데이터가 들어가서 출력되는 모습이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>컨텐츠에 데이터 출력하기</h1>
<ul>
<li>th:text 사용 <span>Hello String</span></li>
<li>컨텐츠 안에서 직접 출력하기 = Hello String</li>
</ul>
</body>
</html>Escape
-
HTML 문서는 < , > 같은 특수 문자 기반으로 정의
-
뷰 템플릿으로 HTML 화면을 생성 할 때는 출력하는 데이터에 이러한 특수문자가 있는 것을 주의 해야함.
-
"Hello <b>Spring!<b>" b 태크를 통해서 Spring! 부분을 진하게 나오도록 할려고 해보자. -
@GetMapping("/text-basic") public String textBasic(Model model){ model.addAttribute("data","Hello <b>String</b>"); return "basic/text-basic"; } -
이렇게 모델에 데이터를 넣어주는 경우 b 태그는 우리가 원했던것처럼 진하게 해주는 게 아닌
Hello <b> String </b> 원본 html을 보게되면 < 부분은 < 로 > 부분은 > 로 나오게됨.이렇게 나오게됨.
웹 브라우저는 <를 태그의 시작으로 인식하기 때문에 생기는 현상.
이스케이프 기능을 사용하지 않으려면 th:inline ="none" 을 넣어줘야한다.
-> 타임리프는 [[...]] 를 원래는 해석이 되기 때문에 보이지 않게된다. th:inline ="none" 을 적어둔 태그안에서는 타임리프가 해석하지 말라는 옵션
열심히하자