타임리프 태그 속성(Attribute)

타임리프는 주로 HTML 태그에 th:* 속성을 지정하는 방식으로 동작합니다.

th:* 로 속성을 적용하면 기존 속성을 대체합니다. 기존 속성이 없으면 새로 만듭니다.

BasicController 추가

package hello.thymeleaf.basic;

import lombok.Data;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.time.LocalDateTime;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

@Controller
@RequestMapping("/basic")
public class BasicController {

		...

    **@GetMapping("/attribute")
    public String attribute() {
        return "basic/attribute";
    }**

		...

}

/resources/templates/basic/attribute.html

<!DOCTYPE html>
<html xmlns:th="<http://www.thymeleaf.org>">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>속성 설정</h1>
<input type="text" name="mock" th:name="userA"/>

<h1>속성 추가</h1>
- th:attrappend = <input type="text" class="text" th:attrappend="class=' large'"/><br/>
- th:attrprepend = <input type="text" class="text" th:attrprepend="class='large '"/><br/>
- th:classappend = <input type="text" class="text" th:classappend="large"/><br/>

<h1>checked 처리</h1>
- checked o <input type="checkbox" name="active" th:checked="true"/><br/>
- checked x <input type="checkbox" name="active" th:checked="false"/><br/>
- checked=false <input type="checkbox" name="active" checked="false"/><br/>

</body>
</html>

속성 설정

th:* 속성을 지정하면 타임리프는 기존 속성을 th:* 로 지정한 속성으로 대체합니다. 기존 속성이 없다면 새로 만듭니다.
```
<input type="text" name="mock" th:name="userA" />
```
→ 타임리프 렌더링 후
```
<input type="text" name="userA" />
```
<aside> ✏️ 타임리프는 네츄럴 템플릿이기 때문에 순수 HTML을 그대로 유지합니다.

그래서 그냥 해당 파일을 열게되면 웹 브라우저는 th: 속성을 알지 못하므로 무시하고 기존의 값에 따라서 화면을 출력합니다.

→ 참고1, 참고2

</aside>
속성 추가
- th:attrappend : 속성 값의 뒤에 값을 추가합니다.
  - th:attrappend="class=' large'" 가 한 문장입니다.
  - 클래스 속성에다가 large 를 추가합니다. 그래서 렌더링이 될 때는 class="text large"로 렌더링이 됩니다.
- th:attrprepend : 속성 값의 앞에 값을 추가합니다.
  - 마찬가지로 앞에다가 large 를 추가합니다.
- th:classappend : class 속성에 자연스럽게 추가합니다.
  - 매번 띄어쓰기를 하는 것은 귀찮습니다. 그래서 th:classappend를 쓰게 되면 적절하게 띄어쓰기를 해서 뒤에 붙게 됩니다.
checked 처리
- HTML에서는 <input type="checkbox" name="active" checked="false" /> → 이 경우에도 checked 속성이 있기 때문에 checked="false" 가 false이든 true이든 관계 없이 checked 처리가 되어버립니다.
  - 페이지 소스코드
  - 화면
- HTML에서 checked 속성은 checked 속성의 값과 상관없이 checked 라는 속성만 있어도 체크가 됩니다. 이런 부분이 true , false 값을 주로 사용하는 개발자 입장에서는 불편합니다.
- 타임리프의 th:checked 는 값이 false 인 경우 checked 속성 자체를 제거합니다.
```
<input type="checkbox" name="active" th:checked="false" />
```
  → 타임리프 렌더링 후
```
<input type="checkbox" name="active" />
```
  - 소스코드
```
- checked o <input type="checkbox" name="active" th:checked="true"/><br/>
- checked x <input type="checkbox" name="active" th:checked="false"/><br/>
```
  - 페이지 소스코드
  - 화면
- 예를 들어,
```
- checked o <input type="checkbox" name="active" th:checked="${isChecked}"/><br/>
- checked x <input type="checkbox" name="active" th:checked="${isChecked}"/><br/>
```
  - 컨트롤러에서 ${isChecked} 로 데이터가 넘어올 것입니다. 그래서 그냥 isChecked만 보고 true인지 false인지 체크하면 훨씬 편합니다.

타임리프 태그 속성(Attribute)

BasicController 추가

Reference