[Thymeleaf] 변수, 리터럴, 연산

1.  변수 - SpringEL (Spring Expression Language)

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

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

//Controller
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);

(1) Object

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

(2) List

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

(3) Map

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

(4) 지역 변수

th:with="${...}"

• th:with를 사용하면 지역 변수를 선언해서 사용할 수 있다.
• 지역 변수는 선언한 태그 안에서만 사용할 수 있다.

<div th:with="first=${users[0]}">
    <p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>
</div>

 

2. 리터럴 (Literals)

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

• 문자 : 'hello'
• 숫자 : 10
• 불린 : true, false
• null : null
• 나머지는 자바에서 사용하듯이 사용하면 되지만 문자는 조금 주의해야 한다.

(1) 문자

• 타임리프에서 문자 리터럴은 항상 ' (작은 따옴표)로 감싸야한다.
• 공백 없이 쭉 이어진다면 하나의 의미 있는 토근으로 인지해서 작은 따옴표를 생략할 수 있다.

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

• 중간에 공백이 있다면 하나의 의미있는 토큰으로 인식되지 않아 오류가 발생한다.

<span th:text="hello world!"></span> <!--오류 발생-->

• ' (작은따옴표)로 감싸서 오류를 해결한다.

<span th:text="'hello world!'"></span> <!--정상 작동-->

(2) 리터럴 대체(Literal Substitutions)

"|....|" 형식을 사용해서 리터럴 대체를 한다.

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

<span th:text="'hello ' + ${data}"></span>

• 다음과 같이 리터럴 대체 문법을 사용하면, 더하기 없이 편리하게 사용 가능하다.

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

 

3. 연산 (Operation)

• HTML안에서 사용하기 때문에 HTML 엔티티를 사용한다.

(1) 산술 연산

<li>산술 연산
    <ul>
        <li><span th:text="10 + 2"></span></li> <!--12-->
        <li><span th:text="10 % 2 == 0"></span></li> <!--true-->
    </ul>
</li>

(2) 비교 연산

<li>비교 연산
    <ul>
        <li><span th:text="1 &gt; 10"></span></li> <!--false-->
        <li><span th:text="1 gt 10"></span></li> <!--false-->
        <li><span th:text="1 >= 10"></span></li> <!--false-->
        <li><span th:text="1 ge 10"></span></li> <!--false-->
        <li><span th:text="1 == 10"></span></li> <!--false-->
        <li><span th:text="1 != 10"></span></li> <!--true-->
    </ul>
</li>

• HTML 엔티티를 사용해야 한다.
  • > : gt
  • < : lt
  • >= : ge
  • <= : le
  • ! : not
  • == : eq
  • != : neq, ne

(3) 조건식

<li>조건식
    <ul>
        <li><span th:text="(10 % 2 == 0)? '짝수':'홀수'"></span></li> <!--짝수-->
    </ul>
</li>

(4) Elvis 연산자

• 조건식의 편의 버전
• data가 있으면 출력, 없으면 문구가 출력된다.

<li>Elvis 연산자
    <ul>
        <li><span th:text="${data}?: '데이터가없습니다.'"></span></li> <!--Spring!-->
        <li><span th:text="${nullData}?: '데이터가 없습니다.'"></span></li> <!--데이터가 없습니다-->
    </ul>
</li>

(5) No-Operation

• _인 경우 마치 타임리프가 실행되지 않는 것처럼 동작한다.
• data가 없어서 '_'(no operation)이 선택될 경우 무효화가 된다.
• HTML의 내용을 그대로 활용할 수 있다.

<li>No-Operation
    <ul>
        <li><span th:text="${data}?: _">데이터가 없습니다.</span></li> <!--Spring-->
        <li><span th:text="${nullData}?: _">데이터가없습니다.</span></li> <!--데이터가 없습니다-->
    </ul>
</li>