[ Frontend ]/JSP_Thymeleaf

[Thymeleaf] 기본 문법 (text, 변수표현, URL 링크, 리터럴)

2023. 4. 20. 12:06
목차
  1. 1. 내용 변경 : th:text , [[…]]
  2. 1) th:text
  3. 2) [[…]]
  4. 2. Escape
  5. 3. Unescaped - th:utext
  6. 변수 표현식 : ${…}
  7. 1. Object 표현
  8. 2. List
  9. 3. Map
  10. (참고) 지역변수 선언 th:with
  11. URL 링크 표현식 @{...}
  12. 데이터 example
  13. 1) 단순 링크
  14. 2) 쿼리 파라미터 생성
  15. 3) Path Variable
  16. 4) PathVariable + 쿼리 파라미터
  17. (ex) URL 링크 간단히
  18. 1) 작은따옴표 규칙
  19. 2) 리터럴 대체 - |...|
  20. (예제)

텍스트 - text, utext

1. 내용 변경 : th:text , [[…]]

<li> "th:text" 사용 : <span th:text="${data}">텍스트</span></li>
<li>컨텐츠 안에서 직접 출력하기 : [[${data}]]</li>

1) th:text

  • 내용의 값을 th:text 의 값으로 변경한다.
  • 여기서는 ‘텍스트’을 ${data} 의 값으로 변경한다.

2) [[…]]

  • [[…]] 안에 있는 데이터를 직접 출력할 수 있다.

2. Escape

이스케이프(escape) : HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것

HTML 엔티티 : 웹 브라우저는 ‘<’ 를 HTML 테그의 시작으로 인식한다. 따라서 < 를 테그의 시작이 아니라 문자로 표현할 수있는 방법을 HTML 엔티티라 한다.

  • 타임리프가 제공하는 th:text , [[...]] 는 기본적으로 이스케이스(escape)를 제공한다.
    • (ex) ‘<’ → &lt ‘>’ → &gt 등

3. Unescaped - th:utext

  • th:text → th:utext
  • [[…]] → [(…)]

data = "Hello < b >spring!< b >" 일때

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

<li><span th:inline="none">[[...]] = </span>[[${data}]]</li>
<li><span th:inline="none">[(...)] = </span>[(${data})]</li>
  • 위의 예제에서unescaped로 설정된 데이터는 <b>태그를 그대로 적용한다.

출력

th:text = Hello < b >spring!< b >
th:utext = Hello spring!
[[...]] = Hello < b >spring!< b >
[(...)] = Hello spring!

 

(+) th:inline="none" : 이 태그 안에서는 타임리프가 해석하지 말라는 옵션이다.

실제 서비스에서는 escape를 기본으로 하고, 꼭 필요할 때만 unescape를 사용하자.


변수 표현 - SpringEL

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

 

변수 표현식 : ${…}

<td th:text="${item.price}">10000</td>

  • 모델에 포함된 값이나, 타임리프 변수로 선언한 값을 조회할 수 있다.
  • 프로퍼티 접근법을 사용한다. (${item.price}는 item.getPrice()의 방법으로 접근한다.)

1. Object 표현

model.addAttribute("user",userA);
User 객체가 있다고 해보자.
userA의 속성을 꺼낼 때 , 세가지 방법을 이용할 수 있다.

<li><span th:text="${user.username}"></span></li>
<li><span th:text="${user['username']}"></span></li>
<li><span th:text="${user.getUsername()}"></span></li>

모두 userA의 username 속성의 값이 출력된다.


2. List

model.addAttribute("users",userList);
userList<User>에 userA, userB, userC가 담겨 있을때, 세가지 방법을 이용할 수 있다.

<li><span th:text="${users[0].age}"></span></li>
<li><span th:text="${users[0]['age']}"></span></li>
<li><span th:text="${users[0].getAge()}"></span></li>

모두 userA의 age 속성의 값이 출력된다.


3. Map

model.addAttribute("userMap",userMap);
userMap<String,User>에 userA, userB, userC 가 담겨 있을때,
세가지 방법을 이용할 수 있다.
userMap의 key는 username 이다.

<li><span th:text="${userMap['userA'].age}"></span></li>
<li><span th:text="${userMap['userA']['age']}"></span></li>
<li><span th:text="${userMap['userA'].getAge()}"></span></li>

모두 userA의 age 속성의 값이 출력된다.


(참고) 지역변수 선언 th:with

<div th:with="first=${users[0]}">
    <p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>
</div>
  • first가 users[0]에 들어있는 user 객체가 된다.
  • 해당 태그 내에서 first.username으로 first 객체의 username 속성을 가져올 수 있다.

URL 링크

URL 링크 표현식 @{...}

th:href="@{...}


데이터 example

    @GetMapping("/hello")
    public String link(Model model){
        model.addAttribute("param1","data1");
        model.addAttribute("param2","data2");
        return "basic/link";
    }
  • /hello : URL 매핑
  • basic/link : html파일

1) 단순 링크

<li><a th:href="@{/hello}">basic url</a></li>
  • url : /hello

2) 쿼리 파라미터 생성

<li><a th:href="@{/hello(param1=${param1}, param2=${param2})}">
helloqueryparam</a></li>
  • url : /hello?param1=data1$param2=data2

3) Path Variable

<li><a th:href="@{/hello/{param1}/{param2}(param1=${param1},param2=${param2})}">
path variable</a></li>
  • url : /hello/data1/data2

4) PathVariable + 쿼리 파라미터

<li><a th:href="@{/hello/{param1}(param1=${param1},param2=${param2})}">
path+query</a></li>
  • url : /hello/data1?param2=data2
  • param1은 앞쪽의 {param1}에 대입되고,
  • 대입될 것이 없는 param2는 쿼리 파라미터로 적용된다.

(ex) URL 링크 간단히

th:href="@{|/basic/items/${item.id}|}"

  • 리터럴 대체 문법 활용

Literal

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

(ex) 리터럴

  • 문자 : ‘hello’
  • 숫자 : 10
  • 불린 : true , false
  • null : null

1) 작은따옴표 규칙

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

ex) <span th:text="'hello'">

그러나 공백 없이 쭉 이어지는 문자열은 하나의 의미있는 토큰으로 인정해서 작은따옴표를 생략할 수 있다.

Rule) : A-Z , a-z , 0-9 , [ ] , . , - , _ → 이 문자들로 공백이 없는 경우

ex) <span th:text="hello">

공백이 있는 경우

(오류) ex) <span th:text="hello world!!">

(수정) ex) <span th:text="'hello world!!'">


2) 리터럴 대체 - |...|

(기존)타임리프에서 문자와 표현식 등은 분리되어 있기 때문에 더해서(+) 사용해야 한다.

<span th:text="'Welcome to our application, ' + ${user.name} + '!'">

(리터럴) 이럴 때 리터럴 대체 문법을 사용하면 더하기(+) 없이 편하게 사용할 수 있다.

<span th:text="|Welcome to our application, ${user.name}!|">

 


(예제)

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

 


 

(참고) 김영한님 인프런 Spring MVC-2
https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2

반응형

'[ Frontend ] > JSP_Thymeleaf' 카테고리의 다른 글

[JSP] JSP 간단 정리  (0) 2023.08.01
[Thymeleaf] 기본 문법 (연산, 반복, if, 블록)  (0) 2023.05.04
[Thymeleaf, html, bootstrap] 자주 사용하는 태그 모음  (0) 2023.04.22
[Thymeleaf] 기본객체, 유틸리티 객체  (0) 2023.04.21
[Thymeleaf] 타임리프 란?  (0) 2023.04.20
  1. 1. 내용 변경 : th:text , [[…]]
  2. 1) th:text
  3. 2) [[…]]
  4. 2. Escape
  5. 3. Unescaped - th:utext
  6. 변수 표현식 : ${…}
  7. 1. Object 표현
  8. 2. List
  9. 3. Map
  10. (참고) 지역변수 선언 th:with
  11. URL 링크 표현식 @{...}
  12. 데이터 example
  13. 1) 단순 링크
  14. 2) 쿼리 파라미터 생성
  15. 3) Path Variable
  16. 4) PathVariable + 쿼리 파라미터
  17. (ex) URL 링크 간단히
  18. 1) 작은따옴표 규칙
  19. 2) 리터럴 대체 - |...|
  20. (예제)
'[ Frontend ]/JSP_Thymeleaf' 카테고리의 다른 글
  • [Thymeleaf] 기본 문법 (연산, 반복, if, 블록)
  • [Thymeleaf, html, bootstrap] 자주 사용하는 태그 모음
  • [Thymeleaf] 기본객체, 유틸리티 객체
  • [Thymeleaf] 타임리프 란?
HSRyuuu
HSRyuuu
Web Backend Developer happyhsryu
HSRyuuu
HS_dev_log
HSRyuuu
전체
오늘
어제
  • 전체 글 보기 (234) N
    • Java (25)
    • Spring (28) N
    • JPA & QueryDSL (13)
    • Database (17)
    • 자료구조 & 알고리즘 (30)
    • DevOps (10)
    • [ Computer Science ] (47)
      • Web & Network (14)
      • 프로그래밍 이론 (11)
      • 운영체제 (3)
      • 데이터베이스 이론 (5)
      • Linux 리눅스 (7)
    • [ Frontend ] (17)
      • Vue.js & Nuxt.js (9)
      • JSP_Thymeleaf (7)
    • [ 기타 ] (47)
      • 오픈소스 라이브러리 (5)
      • 코딩테스트 (13)
      • Trouble Shooting (7)
      • Tech Interview (6)
      • Book Review (9)
      • 끄적끄적... (5)
      • 개인 프로젝트 (2)

블로그 메뉴

  • 홈
  • 태그
  • github

공지사항

  • GitHub
  • 공부한 내용을 정리하고 기록하는 블로그 입니다.

인기 글

태그

  • HTTP
  • Linux
  • 백엔드스쿨
  • SpringBoot
  • SQL
  • 기술면접
  • cleancode
  • Redis
  • 백엔드공부
  • 백엔드기술면접
  • springsecurity
  • vue3
  • 자료구조
  • TechInterview
  • 백준
  • web
  • 개발자
  • 리눅스
  • MySQL
  • 백엔드
  • 클린코드
  • Database
  • Redisson
  • JPA
  • Spring
  • mybatis
  • Nuxt3
  • Java
  • 제로베이스
  • 트랜잭션

최근 댓글

최근 글

hELLO · Designed By 정상우.
HSRyuuu
[Thymeleaf] 기본 문법 (text, 변수표현, URL 링크, 리터럴)
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.