[MVC] 타임리프 - 표준 표현식 구문

변수 - SpringEL
기본 객체들
유틸리티 객체와 날짜
URL 링크
단순한 URL
쿼리 파라미터
경로 변수
경로 변수 + 쿼리 파라미터
리터럴

변수 - SpringEL

Object
user.username : user의 username을 프로퍼티 접근 user.getUsername()
user['username'] : 위와 같음 user.getUsername()
user.getUsername() : user의 getUsername() 을 직접 호출

List
users[0].username : List에서 첫 번째 회원을 찾고 username 프로퍼티 접근
list.get(0).getUsername()
users[0]['username'] : 위와 같음
users[0].getUsername() : List에서 첫 번째 회원을 찾고 메서드 직접 호출

Map
userMap['userA'].username : Map에서 userA를 찾고, username 프로퍼티 접근
map.get("userA").getUsername()
userMap['userA']['username'] : 위와 같음
userMap['userA'].getUsername() : Map에서 userA를 찾고 메서드 직접 호출

코드로 살펴보자

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;
        }
    }

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>
</body>
</html>

기본 객체들

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-object.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>

유틸리티 객체와 날짜

타임리프는 문자, 숫자 날짜, URI 등을 편리하게 다루는 다양한 유틸리티 객체를 제공한다.

#message : 메시지, 국제화 처리

#uris : URI 이스케이프 지원

#dates : java.util.Date 서식 지원

#calendars : java.util.Calendar 서식 지원

#temporals : 자바8 날짜 서식 지원

#numbers : 숫자 서식 지원

#strings : 문자 관련 편의 기능

#objects : 객체 관련 기능 제공

#bools : boolean 관련 기능 제공

#arrays : 배열 관련 기능 제공

#lists , #sets , #maps : 컬렉션 관련 기능 제공

#ids : 아이디 처리 관련 기능 제공, 뒤에서 설명

이러한 유틸리티 객체들은 이런 것이 있다 알아두고, 필요할 때 찾아서 사용하면 된다.

사용예시

<span th:text="${#temporals.format(localDateTime, 'yyyy-MM-dd HH:mm:ss')}"></span>

코드를 통해 알아보자.

BasicController 추가

@GetMapping("/date")
public String date(Model model) {
 	model.addAttribute("localDateTime", LocalDateTime.now());
 	return "basic/date";
}

date.html 추가

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

URL 링크

타임리프에서 URL을 생성할 때는 @{...} 문법을 사용하면 된다.

BasicController 코드 추가

@GetMapping("/link")
    public String link(Model model) {
        model.addAttribute("param1", "data1");
        model.addAttribute("param2", "data2");
        return "basic/link";
    }

link.html 생성

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

마지막 링크를 타고 들어가면 다음과 같은 URL로 나타난다.

단순한 URL

@{/hello} -> /hello

쿼리 파라미터

@{/hello(param1=${param1}, param2=${param2})}

/hello?param1=data1&param2=data2
() 에 있는 부분은 쿼리 파라미터로 처리된다

경로 변수

@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}

/hello/data1/data2
URL 경로상에 변수가 있으면 () 부분은 경로 변수로 처리된다.

경로 변수 + 쿼리 파라미터

@{/hello/{param1}(param1=${param1}, param2=${param2})}

/hello/data1?param2=data2
경로 변수와 쿼리 파라미터를 함께 사용할 수 있다

리터럴

리터럴은 소스 코드상에 고정된 값을 말하는 용어이다.

타임리프에서 문자 리터럴은 항상 ' (작은 따옴표)로 감싸야 한다.

BasicController 코드 추가

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

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>"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>

'🍀Spring > Web MVC' 카테고리의 다른 글

[Spring] 스프링 MVC 구조이해 (0)	2024.08.19
[MVC] 타임리프 - 기본 기능, 텍스트 (1)	2024.07.20
[MVC] 요청 매핑 (RequestMapping, HTTP 메서드) (0)	2024.05.05
[MVC] MVC 패턴 (0)	2024.03.31
[MVC] 서블릿 - HttpServletRequest (0)	2024.03.30

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[MVC] 타임리프 - 표준 표현식 구문

변수 - SpringEL

기본 객체들

유틸리티 객체와 날짜

URL 링크

단순한 URL

쿼리 파라미터

경로 변수

경로 변수 + 쿼리 파라미터

리터럴

'🍀Spring > Web MVC' 카테고리의 다른 글

변수 - SpringEL

기본 객체들

유틸리티 객체와 날짜

URL 링크

단순한 URL

쿼리 파라미터

경로 변수

경로 변수 + 쿼리 파라미터

리터럴

'🍀Spring > Web MVC' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역