4 분 소요

 인프런 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술편을 학습하고 정리한 내용 입니다.

리터럴

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

예를 들어 다음 코드에서 "Hello"는 문자 리터럴, 10, 20는 숫자 리터럴이다.

1
2

String a = "Hello"
int a = 10 * 20

타임리프는 다음과 같은 리터럴이 있다.

  • 문자 : 'Hello'
  • 숫자 : 10
  • 불린 : true, false
  • null : null

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

1

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

하지만 문자를 항상 '로 감싸는 것은 귀찮다.

공백 없이 쭉 이어진다면 하나의 의미 있는 토큰으로 인지해서

다음과 같이 작은 따옴표를 생략할 수 있다.

룰 : A-Z, a-z, 0-9, [], .. -, _

<span th:text="hello">

잘못된 예 ) <span th:text="hello world!"></span>
문자 리터럴은 원칙 상 '로 감싸야 한다.
중간에 공백이 있어서 하나의 의미있는 토큰으로 인식 X

BasicController

1
2
3
4
5

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

저 코드 상 주석을 풀면…

바로 오류 난다..

리터럴 대체(Literal substitutions)

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

마지막의 리터럴 대체 문법을 사용하면 마치 템플릿을 사용하는 것 처럼 편리하다.

연산

타임리프 연산은 자바와 크게 다르지 않다.

HTML 안에서 사용하기 때문에 HTML 엔티티를 사용하는 부분만 주의하자.

BasicController

1
2
3
4
5
6

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

resources/templates/basic/operation.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
</head>  
<body>  
  
<ul>  
    <li>산술 연산  
        <ul>  
            <li>10 + 2 = <span th:text="10 + 2"></span></li>  
            <li>10 % 2 == 0 = <span th:text="10 % 2 == 0"></span></li>  
        </ul>  
    </li>  
    <li>비교 연산  
        <ul>  
            <li>1 > 10 = <span th:text="1 &gt; 10"></span></li>  
            <li>1 gt 10 = <span th:text="1 gt 10"></span></li>  
            <li>1 >= 10 = <span th:text="1 >= 10"></span></li>  
            <li>1 ge 10 = <span th:text="1 ge 10"></span></li>  
            <li>1 == 1 = <span th:text="1 == 10"></span></li>  
            <li>1 != 1 = <span th:text="1 != 10"></span></li>  
        </ul>  
    </li>  
    <li>조건식  
        <ul>  
            <li>(10 % 2 == 0)? '짝수':'홀수' = <span th:text="(10 % 2 == 0)? '짝수':'홀수'"></span></li>  
        </ul>  
    </li>  
    <li>Elvis 연산자  
        <ul>  
            <li>${data}?: '데이터가 없습니다.' = <span th:text="${data}?: '데이터가 없습니다.'"></span></li>  
            <li>${nullData}?: '데이터가 없습니다.' = <span th:text="${nullData}?: '데이터가 없습니다.'"></span></li>  
        </ul>  
    </li>  
    <li>No-Operation  
        <ul>  
            <li>${data}?: _ = <span th:text="${data}?: _">데이터가 없습니다.</span></li>  
            <li>${nullData}?: _ = <span th:text="${nullData}?: _">데이터가 없습니다.</span></li>  
        </ul>  
    </li>  
</ul>  
  
</body>  
</html>

  • 비교 연산 : HTML 엔티티를 사용해야 하는 부분을 주의하자.
    • >(gt), < (lt), >= (ge), <= (le), ! (not), == (eq), !=(neq, ne)
  • 조건 식 : 자바의 조건 식과 유사하다.
  • Elvis 연산자 : 조건 식의 편의 버전
  • No-Operation : _ 인 경우 마치 타임리프가 실행되지 않는 것 처럼 동작 한다. 이것을 잘 사용하면 HTML의 내용 그대로 잘 활용할 수 있다. 마지막 예를 보면 데이터가 없습니다. 부분이 그대로 출력된다.

속성 값 설정

타임리프 태그 속성(Attribute)

타임리프는 주로 HTML 태그에 th:*속성을 지정하는 방식으로 동작한다.

th:*로 속성을 적용하면 기존 속성을 대체한다.

기존 속성이 없으면 새로 만든다.

BasicController

1
2
3
4

@GetMapping("/attribute")  
public String attribute(Model model) {  
    return "basic/attribute";  
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!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:*로 치환 되어 버렸다.

그리고 속성 추가 항목 같은 경우에는 class에 띄어쓰기 해서 값을 추가해 버렸다.

속성 설정

th:*속성을 지정하면 타임리프는 기존 속성을 th:*로 지정한 속성으로 대체한다.

기존 속성이 없다면 새로 만든다.

<input type="text" name="mock" th:name="userA" />

→ 타임리프 렌더링 후 : <input type="text" name="userA" />

속성 추가

th:attrappend : 속성 값의 뒤에 값을 추가한다. (띄어쓰기 주의!)

th:attrprepend : 속성 값의 앞에 값을 추가한다.(띄어쓰기 주의!)

th:classappend : class 속성에 자연스럽게 추가한다.

checked 처리

HTML에서는 <input type="checkbox" name="active" checked="false" />

이 경우에도 checked 속성이 있기 때문에 checked 처리가 되어 버린다.

HTML에서 checked속성은 checked속성의 값과 상관없이 checked라는 속성만 있어도 체크가 된다.

이런 부분이 true, false값을 주로 사용하는 개발자 입장에서는 불편하다.

타임리프의 th:checked는 값이 false인 경우 checked속성 자체를 제거한다.

<input type="checkbox" name="active" th:checked="false" />

→ 타임리프 렌더링 후 : <input type="checkbox" name="active" />

댓글남기기

참고