[Thymleaf] 타임리프 - 기본 :: 텍스트, 변수, 리터럴

인프런 강의 내용 정리

텍스트

th:text
- HTML 태그 안에 속성을 추가해서 텍스트를 출력한다.
ex)

[[...]]
- HTML 태그 속성이 아닌 HTML 콘텐츠 영역 안에서 텍스트를 출력할 경우 사용한다.
ex) [[${data}]]

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("text-basic")
    public String textBasic(Model model) {
        model.addAttribute("data", "Hello Spring!");

        return "basic/text-basic";
    }
}

resources/templates/basic/text-basic.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymleaf.org">
<head>
    <meta charset="UTF-8">
    <title>text</title>
</head>
<body>
    <ul>
        <li>th:text 사용 <span th:text="${data}"></span></li>
        <li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>
    </ul>
</body>
</html>

th:utext
- 이스케이프 기능을 사용하지 않고 텍스트를 출력한다.
* 이스케이프 기능 :: < → < > → >
ex)

[(...)]
- HTML 태그 속성이 아닌 HTML 콘텐츠 영역 안에서 이스케이프 기능 없이 텍스트를 출력할 경우 사용한다.
ex) [($data)]

java/hello/thymeleaf/basic/BasicController.java

package hello.thymeleaf.basic;

import lombok.Data;
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("text-unescaped")
    public String textUnescaped(Model model) {
        model.addAttribute("data", "Hello <b>Spring!</b>");

        return "basic/text-unescaped";
    }
}

resources/templates/basic/text-unescaped.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>utext</title>
</head>
<body>
    <ul>
        <li><span th:utext="${data}"></span></li>
        <li><span>[(${data})]</span></li>
    </ul>
</body>
</html>

변수 - SpringEL

변수 표현식 : ${...}

Object
- 객체.프로퍼티
ex) user.username == user.getUsername()
- 객체['프로퍼티']
ex) user['username'] == user.getUsername()
- 객체.get메소드호출()
ex) user.getUsername() == user.getUsername()

List
- 객체[인덱스].프로퍼티
ex) userList[0].username == list.get(0).getUsername()
- 객체[인덱스]['프로퍼티']
ex) userList[0]['username'] == list.get(0).getUsername()
- 객체[인덱스].get메소드호출()
ex) userList[0].getUsername() == list.get(0).getUsername()

Map
- 객체['키'].프로퍼티
ex) userMap['userA'].username == map.get("userA").getUsername()
- 객체['키']['프로퍼티']
ex) userMap['userA']['username'] == map.get("userA").getUsername()
- 객체['키'].get메소드호출()
ex) userMap['userA'].getUsername() == map.get("userA").getUsername()

지역 변수 : th:with
- 지역변수는 선언한 태그 안에서만 사용할 수 있다.

java/hello/thymeleaf/basic/BasicController.java

package hello.thymeleaf.basic;

import lombok.Data;
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.HashMap;
import java.util.List;
import java.util.Map;

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

    @GetMapping("/variable")
    public String variable(Model model) {
        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);

        return "basic/variable";
    }

    @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/variable.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>SpringEL 표현식</h1>
<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>

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

</body>
</html>

리터럴

타임리프 리터럴 종류 :: 문자, 숫자, boolean, null
(단, 문자 리터럴은 항상 ' 으로 감싸야한다.)

리터럴 대체 : |...|
리터럴 대체 문법을 사용하면 템플릿을 사용하는 것처럼 편리하다.

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("/literal")
    public String literal(Model model) {
        model.addAttribute("data", "Spring!");
        return "basic/literal";
    }
}

resources/templates/basic/literal.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>리터럴</h1>
<ul>
    <li>숫자 = <span th:text=10></span></li>
    <li>불린 = <span th:text=true></span></li>
    <li>null = <span th:text=null></span></li>
    <br/>
    
    <!--주의! 다음 주석을 풀면 예외가 발생함-->
    <!--    <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>
</ul>
</body>
</html>

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

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

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

[Thymleaf] 타임리프 - 기본 :: 주석, 블록, 자바스크립트 인라인 (0)	2024.11.18
[Thymleaf] 타임리프 - 기본 :: 속성 값 설정, 반복, 조건부 (0)	2024.11.14
[Thymleaf] 타임리프 - 기본 :: 기본 객체, 유틸리티 객체, 링크, 연산 (0)	2024.11.12
[Thymleaf] 타임리프 - 기본 :: 특징, 사용 선언, 기본 표현식 (0)	2024.11.11

프로그래밍 처음 해봄

[Thymleaf] 타임리프 - 기본 :: 텍스트, 변수, 리터럴

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

티스토리툴바

[Thymleaf] 타임리프 - 기본 :: 텍스트, 변수, 리터럴

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

관련글

티스토리툴바