타임리프 - 기본기능

text, utext

타임리프에서는 text를 사용할 때 다음과 같이 사용할 수 있다.
Controller 에서 값을 전달하면, 전달받은 html 문서에서는 데이터를 사용할 수 있다.
```
<ul>
 <li>th:text = </li>
 <li>[[...]] = [[${data}]]</li>
</ul>
```
- th:text 를 통해서 값을 표현하거나[[…]]를 통해서 값을 표현할 수 있다.
- 하지만 html 문서에서는 <> 와 같은 특수문자를 사용해야하는 경우가 있는데, 이를 사용하고 싶다면 이스케이프 처리를 해주어야만한다.
```
<ul>
 <li>th:utext = </li>
		<li>[(...)] = [(${data})]</li>
</ul>
```
- 바로 th:utext 또는 [(…)]와 같은 표현이 이를 해결해준다.
- 특수문자를 이스케이프 처리해주기에  와 같은 값이 서버에서 전달되더라도 정상적으로 처리할 수 있게 해준다.

변수 사용 (Spring EL)

타임리프에서는 변수를 사용할 때 ${} 문법을 사용한다.
위에서 본 것 처럼 ${data} 처럼 파라미터를 사용할 수 있다.

Spring EL을 통해 Object에 어떻게 접근하는 지를 알아볼 수 있다.

User userA = new User("userA", 10);
User userB = new User("userB", 20);

List<User> list = new ArrayList<>();
list.add(userA);
list.add(userB);

Map<String, User> map = new HashMap<>();
map.put("userA", userA);
map.put("userB", userB);

model.addAttribute("user", userA);
model.addAttribute("users", list);
model.addAttribute("userMap", map);

위와 같이 Object, List, Map 형식으로 데이터를 넘겼다고 가정한다.

<ul>Object
  <li>${user.username} = <span th:text="${user.username}"></span></li>
  <li>${user['username']} = <span th:text="${user['username']}"></span></li>
  <li>${user.getUsername()} = <span th:text="${user.getUsername()}"></span></
  li>
</ul>
<ul>List
  <li>${users[0].username} = <span th:text="${users[0].username}"></span></li>
  <li>${users[0]['username']} = <span th:text="${users[0]['username']}"></span></li>
  <li>${users[0].getUsername()} = <span th:text="${users[0].getUsername()}"></span></li>
</ul>
<ul>Map
  <li>${userMap['userA'].username} = <span th:text="${userMap['userA'].username}"></span></li>
  <li>${userMap['userA']['username']} = <span th:text="${userMap['userA']['username']}"></span></li>
  <li>${userMap['userA'].getUsername()} = <span th:text="${userMap['userA'].getUsername()}"></span></li>
</ul>

user.username 처럼 파라미터 접근법을 통해서 접근이 가능하다.
user.[’username’] 을 통해서도 접근이 가능하고, getter 처럼 접근 또한 가능하다.
위처럼 List나 Map의 데이터에서도 객체를 하나씩 꺼내서 접근하면 된다.
추가적으로 타임리프에서는 지역 변수를 지정해서 사용할 수 있다.

<h1>지역 변수 - (th:with)</h1>
<div th:with="first=${users[0]}">
  <p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>
</div>

first=${users[0]} 을 통해서 변수를 선언하고 사용할 수 있다.

기본 객체

타임리프에서는 기본적으로 제공하는 객체가 있다.

<h1>식 기본 객체 (Expression Basic Objects)</h1>
<ul>
  <li>request = <span th:text="${#request}"></span></li>
  <li>response = <span th:text="${#response}"></span></li>
  <li>session = <span th:text="${#session}"></span></li>
  <li>servletContext = <span th:text="${#servletContext}"></span></li>
  <li>locale = <span th:text="${#locale}"></span></li>
</ul>
<h1>편의 객체</h1>
<ul>
  <li>Request Parameter = <span th:text="${param.paramData}"></span></li>
  <li>session = <span th:text="${session.sessionData}"></span></li>
  <li>spring bean = <span th:text="${@helloBean.hello('Spring!')}"></span></li>
</ul>

기본적으로 많이 사용되는 객체들은 타임리프에서 기본 제공해준다.
request, response, session, servletContext, locale
이외에도 편의를 위한 객체도 존재한다.
- 요청 파라미터를 쉽게 조회할 수 있는 param, 이를 통해서 파라미터에 접근이 가능하다.
- session을 통해서는 HTTP 세션에 접근할 수 있다.
- 심지어는 @를 통해서 스프링 빈에 직접 접근하여 사용할 수도 있다.

Date 표현

타임리프에서 날짜를 조회하는 방법에 대해서 알아보려고 한다.

<h1>LocalDateTime</h1>
<ul>
    <li>default = <span th:text="${localDateTime}"></span></li>
    <li>yyyy-MM-dd HH:mm:ss = <span th:text="${#temporals.format(localDateTime, 'yyyy-MM-dd HH:mm:ss')}"></span></li>
</ul>
<h1>LocalDateTime - Utils</h1>
<ul>
    <li>${#temporals.day(localDateTime)} = <span th:text="${#temporals.day(localDateTime)}"></span></li>
    <li>${#temporals.month(localDateTime)} = <span th:text="${#temporals.month(localDateTime)}"></span></li>
    <li>${#temporals.monthName(localDateTime)} = <span th:text="${#temporals.monthName(localDateTime)}"></span></li>
    <li>${#temporals.monthNameShort(localDateTime)} = <span th:text="${#temporals.monthNameShort(localDateTime)}"></span></li>
    <li>${#temporals.year(localDateTime)} = <span th:text="${#temporals.year(localDateTime)}"></span></li>
    <li>${#temporals.dayOfWeek(localDateTime)} = <span th:text="${#temporals.dayOfWeek(localDateTime)}"></span></li>
    <li>${#temporals.dayOfWeekName(localDateTime)} = <span th:text="${#temporals.dayOfWeekName(localDateTime)}"></span></li>
    <li>${#temporals.dayOfWeekNameShort(localDateTime)} = <span th:text="${#temporals.dayOfWeekNameShort(localDateTime)}"></span></li>
    <li>${#temporals.hour(localDateTime)} = <span th:text="${#temporals.hour(localDateTime)}"></span></li>
    <li>${#temporals.minute(localDateTime)} = <span th:text="${#temporals.minute(localDateTime)}"></span></li>
    <li>${#temporals.second(localDateTime)} = <span th:text="${#temporals.second(localDateTime)}"></span></li>
    <li>${#temporals.nanosecond(localDateTime)} = <span th:text="${#temporals.nanosecond(localDateTime)}"></span></li>
</ul>

타임리프에서는 자바8 날짜인 LocalDate, LocalDateTime, Instant를 사용하려면 추가 라이브러리가 필요하다.
temporals를 이용해서 날짜를 조회할 수 있다.
${#temporals.day, month, year, hour, minute 와 같이 제공되는 기능을 사용하거나,
${#temporals.format(localDateTime, ‘yyyy-MM-dd HH:mm:ss’)} 처럼 원하는 형식으로 포매팅하여 사용할 수도 있다.

URL 표현

타임리프에서 URL을 표현하는 방법에 대해서 알아보자.
```
<h1>URL 링크</h1>
<ul>
 <li><a th:href="@{/hello}">basic url</a></li>
 <li><a th:href="@{/hello(param1=${param1}, param2=${param2})}">hello query param</a></li>
 <li><a th:href="@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}">path variable</a></li>
 <li><a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}">path variable + query parameter</a></li>
</ul>
```
- 타임리프에서는 @{xxx} 문법을 이용해서 URL을 표현할 수 있다.
- 파라미터 표현
 - @{/hello(param1=${param1}, param2=${param2})}
 - ⇒ localhost:8080/hello?param1=data1&param2=data2
- URL 경로로 표현
 - @{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}
 - ⇒ localhost:8080/hello/data1/data2
- 복합적으로 표현
 - @{/hello/{param1}(param1=${param1}, param2=${param2})}
 - ⇒ localhost:8080/hello/data1?param2=data2

리터럴(Literal)

리터럴이란 소스 코드상에 고정된 값을 말하는 용어이다.
```
<h1>리터럴</h1>
<ul>
 
 
 <li>'hello' + ' world!' = </li>
 <li>'hello world!' = </li>
 <li>'hello ' + ${data} = </li>
 <li>리터럴 대체 |hello ${data}| = </li>
</ul>
```
- 타임리프에서 문자 리터럴을 사용하기 위해서는 ‘’(홑따옴표)로 감싸주어야만 한다.
- 하지만 항상 홑따옴표로 감싸는 일은 매우 불편하기에, 하나의 토큰(공백 없이 쭉 이어지는 문자)은 작은 따옴표를 생략할 수 있다.
- 하지만 띄어쓰기가 들어가 있는 경우에는
 - “‘hello world!’”
 - “‘hello ’ + ${data}”
- 위와 같이 항상 감싸주어야만 하는데, 이를 해결하기 위해 있는 것이 리터럴 대체 문법이다.
 - “|hello world!|”
 - “|hello ${data}|”
- 위와 같이 사용할 수 있다.