[Thymleaf] 타임리프 - 기본 :: 속성 값 설정, 반복, 조건부

인프런 강의 내용 정리

속성 값 설정

th:*
:: 속성을 지정하면 타임리프는 기존 속성을 th:*로 지정한 속성으로 대체한다. 기존 속성이 없다면 새로 만든다.
ex) <input type="text" name="mock" th:name="userA" /> -> 타임리프 랜더링 후 <input type="text" name="userA />

속성 추가
- th:attrappend : 속성 값의 뒤에 값을 추가한다.
ex) th:attrappend="class=' large'" (추가하려는 속성에 이미 데이터가 있을 경우 이어붙일 때 공백을 줘야함)
- th:attrprepend : 속성 값의 앞에 값을 추가한다.
ex) th:attrprepend="class='large '" (뒤에 속성 값이 추가될 수 있으니 공백을 주면 좋음)
- th:classappend : class 속성에 자연스럽게 추가한다.
ex) th:classappend="large"

checked 처리
- HTML에서는 checked="false"로 되어있어도 checked 속성이 있기 때문에 속성 값과 상관없이 checked 처리가 되버린다.
- 타임리프의 th:checked는 값이 false인 경우 속성 자체를 제거해버린다.
ex) <input type="checkbox" name="active" th:checked="false" />
-> 타임리프 랜더링 후 <input type="checkbox" name="active" />

java/hello/thymeleaf/basic/BasicController.java

package hello.thymeleaf.basic;

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

@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:each
ex) <tr th:each="user : ${users}">
- 반복 시 오른쪽 컬렉션(${users})의 값을 하나씩 꺼내서 왼쪽 변수(user)에 담아 태그를 반복 실행
- th:each는 List 뿐만 아니라 배열, java.util.Iterable, java.util.Enumeration을 구현한 모든 객체를 반복에 사용할 수 있다.
- 단, Map일 경우 Map.Entry가 담긴다.

ex) <tr th:each="user, userStat : ${users}">
- 두번째 파라미터 설정 시, 반복하는 객체의 상태를 확인할 수 있다.
- 두번째 파라미터 생략 시, 지정한 첫번째 변수명(예제에서는 user)+ Stat가 두번째 파라미터 변수명이 된다.
- 즉, 두번째 파라미터 없이 userStat로 사용 가능하다.
- 두번째 변수 기능으로 index, count, size, even, odd, first, last, current 사용 가능
ex) userStat.index, userStat.count ...

java/hello/thymeleaf/basic/BasicController.java

package hello.thymeleaf.basic;

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 java.util.ArrayList;
import java.util.List;

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

    @GetMapping("/each")
    public String each(Model model) {
        addUsers(model);
        return "basic/each";
    }
    private void addUsers(Model model) {
        List<User> list = new ArrayList<>();
        list.add(new User("userA", 10));
        list.add(new User("userB", 20));
        list.add(new User("userC", 30));
        model.addAttribute("users", list);
    }
    
    @Data
    static class User {
        private String username;
        private int age;

        public User(String username, int age) {
            this.username = username;
            this.age = age;
        }
    }
}

resources/templates/basic/each.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>기본 테이블</h1>
<table border="1">
    <tr>
        <th>username</th>
        <th>age</th>
    </tr>
    <tr th:each="user : ${users}">
        <td th:text="${user.username}">username</td>
        <td th:text="${user.age}">0</td>
    </tr>
</table>

<h1>반복</h1>

<table border="1">
    <tr>
        <th>count</th>
        <th>username</th>
        <th>age</th>
        <th>etc</th>
    </tr>
    <tr th:each="user : ${users}">
        <td th:text="${userStat.count}">username</td>
        <td th:text="${user.username}">username</td>
        <td th:text="${user.age}">0</td>
        <td>
            index = <span th:text="${userStat.index}"></span>
            count = <span th:text="${userStat.count}"></span>
            size = <span th:text="${userStat.size}"></span>
            even? = <span th:text="${userStat.even}"></span>
            odd? = <span th:text="${userStat.odd}"></span>
            first? = <span th:text="${userStat.first}"></span>
            last? = <span th:text="${userStat.last}"></span>
            current = <span th:text="${userStat.current}"></span>
        </td>
    </tr>
</table>
</body>
</html>

조건식

if, unless(not if)
- 조건이 맞지 않을 경우 태그 자체를 랜더링하지 않는다.
- if, unless 둘 다 별도로 사용 가능하다.
ex) th:if="${user.age lt 20}"
ex) th:unless="${user.age ge 20}"

switch -case
ex) <td th:switch="${user.age}"> <span th:case="10">10</span> <span th:case="20">20</span> </td>
- 만족하는 조건이 없을 때는 디폴트로 *를 사용한다.
ex) <span th:case="*">디폴트</span>

java/hello/thymeleaf/basic/BasicController.java

package hello.thymeleaf.basic;

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 java.util.ArrayList;
import java.util.List;

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

    @GetMapping("/condition")
    public String condition(Model model) {
        addUsers(model);
        return "basic/condition";
    }
    
    private void addUsers(Model model) {
        List<User> list = new ArrayList<>();
        list.add(new User("userA", 10));
        list.add(new User("userB", 20));
        list.add(new User("userC", 30));
        model.addAttribute("users", list);
    }

    @Data
    static class User {
        private String username;
        private int age;

        public User(String username, int age) {
            this.username = username;
            this.age = age;
        }
    }
}

resources/templates/basic/condition.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>if, unless</h1>
<table border="1">
    <tr>
        <th>count</th>
        <th>username</th>
        <th>age</th>
    </tr>
    <tr th:each="user, userStat : ${users}">
        <td th:text="${userStat.count}">1</td>
        <td th:text="${user.username}">username</td>
        <td>
            <span th:text="${user.age}">0</span>
            <span th:text="'미성년자'" th:if="${user.age lt 20}"></span>
            <span th:text="'미성년자'" th:unless="${user.age ge 20}"></span>
        </td>
    </tr>
</table>

<h1>switch</h1>
<table border="1">
    <tr>
        <th>count</th>
        <th>username</th>
        <th>age</th>
    </tr>
    <tr th:each="user, userStat : ${users}">
        <td th:text="${userStat.count}">1</td>
        <td th:text="${user.username}">username</td>
        <td th:switch="${user.age}">
            <span th:case="10">10살</span>
            <span th:case="20">20살</span>
            <span th:case="*">기타</span>
        </td>
    </tr>
</table>
</body>
</html>

인프런 - 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 (김영한)

저작자표시 비영리 동일조건

'Programing > Thymleaf' 카테고리의 다른 글

[Thymleaf] 타임리프 - 기본 :: 주석, 블록, 자바스크립트 인라인 (0)	2024.11.18
[Thymleaf] 타임리프 - 기본 :: 기본 객체, 유틸리티 객체, 링크, 연산 (0)	2024.11.12
[Thymleaf] 타임리프 - 기본 :: 텍스트, 변수, 리터럴 (0)	2024.11.11
[Thymleaf] 타임리프 - 기본 :: 특징, 사용 선언, 기본 표현식 (0)	2024.11.11

프로그래밍 처음 해봄

[Thymleaf] 타임리프 - 기본 :: 속성 값 설정, 반복, 조건부

'Programing > Thymleaf' 카테고리의 다른 글

티스토리툴바

[Thymleaf] 타임리프 - 기본 :: 속성 값 설정, 반복, 조건부

'Programing > Thymleaf' 카테고리의 다른 글

관련글

티스토리툴바