[Spring] 타임리프 기본기능 정리

타임리프 기본기능 정리

• 간단한 표현: ◦ 변수 표현식: ${...} ◦ 선택 변수 표현식: *{...} ◦ 메시지 표현식: #{...} ◦ 링크 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: _
• 텍스트 - text, utext
  • HTML의 콘텐츠에 데이터를 출력할 때는 th:text를 사용한다
    • <span th:text=”${data}”>
  • HTML 태그의 속성이 아니라 HTML 콘테츠 영역안에서 직접 데이터를 출력하고 싶다면 [[...]]를 사용하면 된다
    • 컨텐츠 안에서 직접 출력 = [[$data]]
• Escape
  • HTML문서는 <,> 같은 특수문자를 기반으로 정의된다
  • 웹 부라우저는 < 를 HTML 태그의 시작으로 인식한다. 따라서 <를 다음과 같은 문자로 인식한다. 이렇게 변경해주는 기능을 이스케이프라고 한다
  • < → $lt , > → $gt
• UnEscape
  • 타임리프는 escape를 사용하지 않고 그대로 가져오는 기능을 제공한다 이것을 Unescape라고한다
  • 기존에 th:text 를 th:utext 로 바꾸어주고, [[...]] 를 [(...)]로 바꾸어준다
  • 만약 <b> 태그를 사용하여 글자를 두껍게 만들고 싶을경우 th:inline=”none”을 사용하고 [(...)]로 데이터를 가져오면 <b> 태그가 씌워진 값을 가져올 수 있다
• SpringEL의 다양한 표현식 사용
  • Object
    • user.username → th:text="${user.username}”
    • user[’username’] → th:text="${user['username']}”
    • user.getUsername() → th:text="${user.getUsername()}”
  • List
    • users[0].username → th:text="${users[0].username}”
    • users[0][’’username’] → th:text="${users[0]['username']}”
    • users[0].getUsername() → th:text=”${users[0].getUsername()}”
  • Map
    • userMap[’userA]’.username → th:text=”${userMap[userA’].username}”
    • userMap[’userA’][’username’] → th:text”{userMap[’userA’][’username’]}”
    • userMap[’userA’].getUsername() →th:text=”{userMap[’userMap[’userA’].getUsername()}
• 지역변수 선언
  • th:with 를 사용하면 지역변수를 선언해서 사용할 수 있다
  • 지역변수는 선언한 태그 안에서만 사용 가능하다
  • <div th:with="first=${users[0]}"> <p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>
• 기본 객체
  • HTTP 요청 파라미터 접근 : param
  • HTTP 세션 접근 : session
  • 스프링 빈 접근 : @
• 리터럴
  • 문자 리터럴 : ‘hello’
  • 숫자 리터럴 : 10
  • 불린 리터럴 : true
  • nuil : null
  • 문자 리터럴을 사용할때 ‘’로 감싸야지만 모든 경우에 정상 동작
• 대체 리터럴
  • <span th:text="|hello ${data}|"> 이런식으로 사용한다 ‘’역할을 대신해준다고 생각하면 편하다
• 연산자

<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 == 10 = <span th:text="1 == 10"></span></li>
 <li>1 != 10 = <span th:text="1 != 10"></span></li>
 </ul>
 </li>

• 속성값 설정

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

• 기능
  • th:attrappend : 속성 값의 뒤에 값을 추가한다
  • th:attrprepend :속성 값의 앞에 값을 추가한다
  • th:classappend : class 속성에 자연스럽게 추가한다
• checked 처리
  • 타임리프의 th:checked는 값이 false인 경우 checked 속성 자체를 제거한다
• 반복문
  • th:each를 사용한다

  <tr th:each="user : ${users}">
   <td th:text="${user.username}">username</td>
   <td th:text="${user.age}">0</td>
   </tr>
  

  • 반복시 오른쪽 컬렉션 ${users}의 값을 하나씩 꺼내서 왼쪽 변수(user)에 담아서 태그를 반복 실행
  • 반복 상태를 유지하고 싶을 경우 <tr th:each=”user, userStat : ${users}”>로 사용 가능
• 조건식
  • th:if="${user.age lt 20}” → 20보다 작을경우 html에 값을 보임
  • th:unless="${user.age ge 20}” → 20보다 크지 않은경우 html에 값을 봉미
  • 타임리프 조건식이 false인경우 html에서는 표현식을 아예 나타내지 않는다
  • switch / case

  <tr th:each="user, userStat : ${users}">
   <td th:text="${userStat.count}">1</td>
   <td th:text="${user.username}">username</td>
   <td th:switch="${user.age}">
   <span th:case="10">10살</span>
   <span th:case="20">20살</span>
   <span th:case="*">기타</span>
   </td>
   </tr>
  

• 자바스크립트 인라인
  • 타임리프에서는 자바스크립트를 지원한다

  <script th:inline="javascript">
   var username = [[${user.username}]];
   var age = [[${user.age}]];
   //자바스크립트 내추럴 템플릿
   var username2 = /*[[${user.username}]]*/ "test username";
   //객체
   var user = [[${user}]];
  </script>
  

  • var username = [[${user.username}]];
    • 인라인 사용 전 → var username = user’
    • 인라인 사용 후 → var username = “user”
    • 인라인 사용 전 렌더링 결과를 보면 user값을 반환한여 결과적으로 자바 스크립트 오류가 발생한다
    • script th:inline=”javascript”를 사용해야 문자열로 반환해준다