[TIL/View Template] thymeleaf 문법 - 기본 기능 (1)

728x90

[타임리프 기본 기능의 종류]

- 링크 : https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#standard-expression-syntax

• 간단한 표현:
	◦ 변수 표현식: ${...}
	◦ 선택 변수 표현식: *{...}
	◦ 메시지 표현식: #{...}
	◦ 링크 URL 표현식: @{...}
	◦ 조각 표현식: ~{...}
• 리터럴
	◦ 텍스트: 'one text', 'Another one!',…
	◦ 숫자: 0, 34, 3.0, 12.3,…
	◦ 불린: true, false
	◦ 널: null
	◦ 리터럴 토큰: one, sometext, main,…
• 문자 연산:
	◦ 문자 합치기: +
	◦ 리터럴 대체: |The name is ${name}|
• 산술 연산:
	◦ Binary operators: +, -, *, /, %
	◦ Minus sign (unary operator): -
• 불린 연산:
	◦ Binary operators: and, or
	◦ Boolean negation (unary operator): !, not
• 비교와 동등:
	◦ 비교: >, <, >=, <= (gt, lt, ge, le)
	◦ 동등 연산: ==, != (eq, ne)
• 조건 연산:
	◦ If-then: (if) ? (then)
	◦ If-then-else: (if) ? (then) : (else)
	◦ Default: (value) ?: (defaultvalue)
• 특별한 토큰:
	◦ No-Operation: _

1. th:text 와 th:utext

타임리프의 가장 기본 기능인 텍스트 출력 기능이다.

타임리프는 기본적으로 HTML 태그의 속성에 기능을 정의해서 동작한다.

HTML 콘텐츠에 데이터를 출력할 때는 아래와 같이 th:text를 사용하면 된다.

<span th:text="${data}">

HTML 태그의 속성이 아니라 HTML 콘텐츠 영역 안에서 직접 데이터를 출력하고 싶으면 아래와 같이 [[...]]를 사용하면 된다.

[[${data}]]

HTML 문서는 <과 > 같은 특수 문자를 기반으로 정의된다.

HTML 문서에 특수 문자가 있는 것을 주의해서 사용해야한다.

강조를 하기 위해서 <b> 태그를 사용한다고 가정했을 때, 의도와 다르게 <b> 태그가 그대로 나오고 F12 개발자 도구를 통해서 소스를 살펴보면 <b> 이렇게 이상한 문자로 표시가 되어있다.

HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것을 '이스케이프(escape)'라고 한다.

타임리프가 제공하는 th:text, [[...]]은 기본적으로 이스케이프를 제공한다.

간단한 예제를 통해 어떻게 사용하는지 살펴보자!

Controller

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

    @GetMapping("text-basic")
    public String textBasic(Model model) {
        model.addAttribute("data", "Hello Spring!");
        return "basic/text-basic";
    }

    @GetMapping("text-unescaped")
    public String textUnescaped(Model model) {
        model.addAttribute("data", "Hello <b>Spring!</b>");
        return "basic/text-unescaped";
    }
}

text-basic.html -> th:text 사용

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

text-unescaped.html -> th:utext 사용(이스케이프 기능을 사용하지 않기 위한 문법)

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

2. 변수 - SpringEL

타임리프에서 변수를 사용할 때는 아래와 같이 변수 표현식을 사용한다.

${...}

그리고 이 변수 표현식에는 스프링 EL이라는 스프링이 제공하는 표현식을 사용할 수 있다.

타임리프에서 변수를 사용할 때는 변수 표현식을 사용한다. 변수 표현식 : ${...} 그리고 이 변수 표현식에는 스프링 EL이라는 스프링이 제공하는 표현식을 사용할 수 있다.

아래 예제를 통해서 어떻게 사용하는지 확인해 보자

Controller

@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);

        ArrayList<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";
    }
    
    // 테스트 데이터를 위한 User Class
    @Data
    static class User {
    	private String username;
        private int age;
        
        public User(String username, int age) {
        	this.username = username;
            this.age = age;
        }
    }
    
  }

variable.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><!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[1]}">
  <p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>
</div>
</body>
</html>

> SpringEL 다양한 표현식 사용

Object

1) user.username : user의 username을 프로퍼티 접근 -> user.getUsername()

2) user['username'] : 위와 같음 -> user.getUsername()

3) user.getUsername() : user의 getUsername() 을 직접 호출

List

1) users[0].username : List에서 첫 번째 회원을 찾고 username 프로퍼티 접근 list.get(0).getUsername()

2) users[0]['username'] : 위와 같음

3) users[0].getUsername() : List에서 첫 번째 회원을 찾고 메서드 직접 호출

Map

1) userMap['userA'].username : Map에서 userA를 찾고, username 프로퍼티 접근 map.get("userA").getUsername()

2) userMap['userA']['username'] : 위와 같음

3) userMap['userA'].getUsername() : Map에서 userA를 찾고 메서드 직접 호출

> th:with(지역변수) 사용

th:with를 사용하면 지역 변수를 선언해서 사용할 수 있다.

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

3. 기본 객체와 편의 객체

타임리프는 기본 객체들을 제공하는데, 스프링 3.0부터 제공하지 않는 것도 있다.

스프링 3.0부터는 직접 model에 해당 객체를 추가해서 사용해야 하니 참고하자!

1) ${#request} - 스프링 부트 3.0부터 제공하지 않는다.

2) ${#response} - 스프링 부트 3.0부터 제공하지 않는다.

3) ${#session} - 스프링 부트 3.0부터 제공하지 않는다.

4) ${#servletContext} - 스프링 부트 3.0부터 제공하지 않는다.

5) ${#locale}

#request는 HttpServletRequest 객체가 그대로 제공되기 때문에 데이터를 조회하려면 request.getParameter("data")처럼 접근해야한다. 이런 점을 해결하기 위해 편의 객체도 제공한다.

1) HTTP 요청 파라미터 접근 : param

${param.paramData}

2) HTTP 세션 접근 : session

${session.sessionData}

3) 스프링 빈 접근 : @

${@helloBean.hello('Spring!')}

이제 아래 예제를 통해서 어떻게 사용하는지 살펴보자

Controller

package hello.thymeleaf.basic;

import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
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 java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

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

    @GetMapping("basic-objects")
    public String basicObjects(
        Model model,
        HttpServletRequest request,
        HttpServletResponse response,
        HttpSession session
    ) {
        session.setAttribute("sessionData", "Hello Session");
        model.addAttribute("request", request);
        model.addAttribute("response", response);
        model.addAttribute("servletContext", request.getServletContext());
        return "basic/basic-objects";
    }

    @Component("helloBean")
    static class HelloBean {
        public String hello(String data) {
            return "Hello " + data;
        }
    }

}

basic-objects.html

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

출처 : 인프런 김영한 MVC2 강의

728x90

'TIL > View Template' 카테고리의 다른 글

[TIL/View Template] thymeleaf - 기본 기능(3) (0)	2024.06.09
[TIL/View Template] thymeleaf 문법 - 기본 기능(2) (0)	2024.06.09
[TIL/View Template] thymeleaf 극소수의 기능 (0)	2024.06.02
[SIST] JSP_days14_JSON과 XML/JSON으로 ajax 처리 (0)	2022.07.03
[SIST] JSP_days13_Ajax (0)	2022.06.30

[타임리프 기본 기능의 종류]

1. th:text 와 th:utext

2. 변수 - SpringEL

> SpringEL 다양한 표현식 사용

> th:with(지역변수) 사용

3. 기본 객체와 편의 객체

'TIL > View Template' 카테고리의 다른 글

티스토리툴바