텍스트 - text, utext
1. 내용 변경 : th:text , [[…]]
<li> "th:text" 사용 : <span th:text="${data}">텍스트</span></li>
<li>컨텐츠 안에서 직접 출력하기 : [[${data}]]</li>1) th:text
- 내용의 값을 th:text 의 값으로 변경한다.
- 여기서는 ‘텍스트’을 ${data} 의 값으로 변경한다.
2) [[…]]
- [[…]] 안에 있는 데이터를 직접 출력할 수 있다.
2. Escape
이스케이프(escape) : HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것
HTML 엔티티 : 웹 브라우저는 ‘<’ 를 HTML 테그의 시작으로 인식한다. 따라서 < 를 테그의 시작이 아니라 문자로 표현할 수있는 방법을 HTML 엔티티라 한다.
- 타임리프가 제공하는
th:text,[[...]]는 기본적으로 이스케이스(escape)를 제공한다. - (ex) ‘<’ →
</ ‘>’ →>등
3. Unescaped - th:utext
th:text→th:utext[[…]]→[(…)]
data = "Hello < b >spring!< b >" 일때
<li>th:text = <span th:text="${data}"></span></li>
<li>th:utext = <span th:utext="${data}"></span></li>
<li><span th:inline="none">[[...]] = </span>[[${data}]]</li>
<li><span th:inline="none">[(...)] = </span>[(${data})]</li>- 위의 예제에서unescaped로 설정된 데이터는
<b>태그를 그대로 적용한다.
(출력)
th:text = Hello < b >spring!< b >
th:utext = Hello spring!
[[...]] = Hello < b >spring!< b >
[(...)] = Hello spring!
(+) th:inline="none" : 이 태그 안에서는 타임리프가 해석하지 말라는 옵션이다.
실제 서비스에서는 escape를 기본으로 하고, 꼭 필요할 때만 unescape를 사용하자.
변수 표현 - SpringEL
타임리프에서 변수를 사용할 때는 변수 표현식을 사용한다.
변수 표현식 : ${…}
<td th:text="${item.price}">10000</td>
- 모델에 포함된 값이나, 타임리프 변수로 선언한 값을 조회할 수 있다.
- 프로퍼티 접근법을 사용한다. (
${item.price}는item.getPrice()의 방법으로 접근한다.)
1. Object 표현
model.addAttribute("user",userA);
User 객체가 있다고 해보자.
userA의 속성을 꺼낼 때 , 세가지 방법을 이용할 수 있다.
<li><span th:text="${user.username}"></span></li>
<li><span th:text="${user['username']}"></span></li>
<li><span th:text="${user.getUsername()}"></span></li>모두 userA의 username 속성의 값이 출력된다.
2. List
model.addAttribute("users",userList);
userList<User>에 userA, userB, userC가 담겨 있을때, 세가지 방법을 이용할 수 있다.
<li><span th:text="${users[0].age}"></span></li>
<li><span th:text="${users[0]['age']}"></span></li>
<li><span th:text="${users[0].getAge()}"></span></li>모두 userA의 age 속성의 값이 출력된다.
3. Map
model.addAttribute("userMap",userMap);
userMap<String,User>에 userA, userB, userC 가 담겨 있을때,
세가지 방법을 이용할 수 있다.
userMap의 key는 username 이다.
<li><span th:text="${userMap['userA'].age}"></span></li>
<li><span th:text="${userMap['userA']['age']}"></span></li>
<li><span th:text="${userMap['userA'].getAge()}"></span></li>모두 userA의 age 속성의 값이 출력된다.
(참고) 지역변수 선언 th:with
<div th:with="first=${users[0]}">
<p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>
</div>- first가 users[0]에 들어있는 user 객체가 된다.
- 해당 태그 내에서 first.username으로 first 객체의 username 속성을 가져올 수 있다.
URL 링크
URL 링크 표현식 @{...}
th:href="@{...}
데이터 example
@GetMapping("/hello")
public String link(Model model){
model.addAttribute("param1","data1");
model.addAttribute("param2","data2");
return "basic/link";
}- /hello : URL 매핑
- basic/link : html파일
1) 단순 링크
<li><a th:href="@{/hello}">basic url</a></li>- url :
/hello
2) 쿼리 파라미터 생성
<li><a th:href="@{/hello(param1=${param1}, param2=${param2})}">
helloqueryparam</a></li>- url :
/hello?param1=data1$param2=data2
3) Path Variable
<li><a th:href="@{/hello/{param1}/{param2}(param1=${param1},param2=${param2})}">
path variable</a></li>- url :
/hello/data1/data2
4) PathVariable + 쿼리 파라미터
<li><a th:href="@{/hello/{param1}(param1=${param1},param2=${param2})}">
path+query</a></li>- url :
/hello/data1?param2=data2 param1은 앞쪽의{param1}에 대입되고,- 대입될 것이 없는
param2는 쿼리 파라미터로 적용된다.
(ex) URL 링크 간단히
th:href="@{|/basic/items/${item.id}|}"
- 리터럴 대체 문법 활용
Literal
리터럴은 소스코드 상에 고정된 값을 말하는 용어이다.
(ex) 리터럴
- 문자 : ‘hello’
- 숫자 : 10
- 불린 : true , false
- null : null
1) 작은따옴표 규칙
타임리프에서 문자 리터럴은 항상 작은따옴표로 감싸야 한다.
ex) <span th:text="'hello'">
그러나 공백 없이 쭉 이어지는 문자열은 하나의 의미있는 토큰으로 인정해서 작은따옴표를 생략할 수 있다.
Rule) :
A-Z,a-z,0-9,[ ],.,-,_→ 이 문자들로 공백이 없는 경우
ex) <span th:text="hello">
공백이 있는 경우
(오류) ex) <span th:text="hello world!!">
(수정) ex) <span th:text="'hello world!!'">
2) 리터럴 대체 - |...|
(기존)타임리프에서 문자와 표현식 등은 분리되어 있기 때문에 더해서(+) 사용해야 한다.
<span th:text="'Welcome to our application, ' + ${user.name} + '!'">(리터럴) 이럴 때 리터럴 대체 문법을 사용하면 더하기(+) 없이 편하게 사용할 수 있다.
<span th:text="|Welcome to our application, ${user.name}!|">(예제)
<!-- <li>"hello world!" = <span th:text="hello world!"></span></li>-->
<li>'hello' + ' world!' = <span th:text="'hello' + ' world!'"></span></li>
<li>'hello world!' = <span th:text="'hello world!'"></span></li>
<li>'hello ' + ${data} = <span th:text="'hello ' + ${data}"></span></li>
<li>리터럴 대체 |hello ${data}| = <span th:text="|hello ${data}|"></span></li>(참고) 김영한님 인프런 Spring MVC-2
https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2
