Spring MVC 2편 타임리프 - 기본기능 2

[1] 📌URL 링크

URL 생성 : @{...}를 사용

• 단순 URL @{/hello} -> /hello

• 쿼리 파라미터
  @{/hello(param1=${param1}, param2=${param2})}
  ->/hello?param1=data1¶m2=data2 -- ${param1} 값이 치환이 된다.

• 경로 변수 (PathVariable)
  @{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}
  -> /hello/data1/data2 값이 치환이 됨.

• 경로 변수 + 쿼리 파라미터
  @{/hello/{param1}(param1=${param1}, param2=${param2})}
  -> /hello/data1?param2=data2
  경로 변수와 쿼리 파라미터를 함께 사용할수 있다.

[2] 📌 리터럴

• 소스 코드에서 고정된 값을 말한다

예) "신재원"은 문자 리터럴, 25는 숫자 리터럴이다.

String a = "신재원"
int age = 25

타임리프에는 다음과 같은 리터럴이 있다.
1. 문자 : 'hello'
2. 숫자 : 10
3. 불린 : true/false
4. null

✔ 타임리프에서 문자 리터럴은 항상 ' (작은 따옴표)로 감싸야된다.
<span th: text = "'hello'">

• 주의점 <span th: text = "hello">은 한 문자로 쭉 이어져있어 ' (작은 따옴표)를 생략할수 있다. 하지만 <span th: text = "hello Spring!"> 지금 같은경우는 hello V Spring! 임으로 생략하면 오류가 발생한다.

✔ 리터럴 대체 문법
| | 를 사용해 <span th:text="|hello ${data}|"> 작은 따옴표 없이 파싱을 해줄수있다.

[3] 😎연산

• 자바의 조건식과 유사하다.
• 비교연산을 할경우 HTML 엔티티를 유의해야 된다.
  • ">", "<", >= 등등

[4] 속성값 설정

• 속성 설정
  th:를 사용해 속성을 지정하는 방식, 기존 속성을 대체(치환)하게 되는데 기존 속성이 없다면 생성해준다.

• 속성 추가
  th:classappend="..." class 속성에 자동으로 띄어쓰기가 되어 추가

• 체크 처리
  Html에서는 check 타입이있으면 false, true에 상관없이 체크 처리가 된다. (개발자의 입장에서는 boolean형을 사용해 판별해야되는데 할수가없다)

  • 하지만 타임 리프에서는 th:checked 값이 false 인경우 체크가 되지 않아, 개발자 입장에서는 판별할수 있게된다.

[5] 반복

• 타임리프에서 반복은 th:each를 사용한다.

✔ 반복 상태 유지 기능

1. index : 0부터 시작하는 값
2. count : 1부터 시작하는 값
3. size : 전체 사이즈
4. even, odd : 홀수 짝수 여부 (boolean)
5. first, last : 처음, 마지막 여부 (boolean)
6. current : 현재 객체

📌 [6] 조건부 평가

• 타임리프의 조건식 : if, unless ("if" 의 반대)
• 1. if, unless
  • 타임리프는 해당 조건이 맞지 않으면 태그 자체가 렌더링 되지 않는다.
• 2. switch
  • th:case="*"은 만족하는 조건이 없을때 사용하는 default

[7] 주석

• 표준 HTML 주석
  <!--<span th:text="${data}">html data</span> -->
  : 자바 스크립트의 표준 HTML 주석은 타임리프가 렌더링 하지않고 그대로 남겨둔다.

• 타임리프 파서 주석 (주로 사용)

  • 렌더링 에서 주석 부분을 제거한다.

<!--/*--> // 시작 부분 (/*)
<span th:text="${data}">html data</span> // 이 부분이 통째로 주석이된다.
<!--*/--> // 끝 부분 ( */)

• 타임리프 프로토타입 주석 (잘사용 X)

<!--/*/
<span th:text="${data}">html data</span> 
/*/-->

[8] 블록

<th:block 은 HTML태그가 제공 X, 타임리프의 유일한 자체태그

• <div>...</div> 안에있는 코드를 그대로 반복하여 블록처럼 렌더링하고 싶을때 사용한다. (잘 사용 X)

[9] 📌 자바스크립트 인라인

• 자바스크립트에서 타임리프를 편리하게 사용할수 있게 기능을 제공
  <script th:inline="javascript">

텍스트 렌더링

• var username = [[${user.username]];
  • 인라인 사용 전 --> var username = 신재원;
  • 인라인 사용 후 --> var username = "신재원";
• 인라인 사용전은 결과적으로 자바스크립트 오류가 발생한다.

객체

인라인 기능을 사용하면 JSON으로 자동으로 변환 해준다.

• 인라인 사용 전에는 toString()이 호출된 값
  var user = (username = 신재원, age = 25)
• 인라인 사용 후
  var user = {"username" : "신재원", "age" : 25}