Spring MVC : 타임리프 기본문법 간략히 정리
- Spring/Spring MVC
- 2021. 12. 26.
타임리프 docs
Documentation - Thymeleaf
Articles Quick glimpses into what Thymeleaf can bring to your project. Introductions With Spring Comparisons
www.thymeleaf.org
위 주소에서 "Thymeleaf + Spring"의 Documentation을 필요할 때 참고하면 된다.
타임리프 특징
- 타임리프는 서버 사이드 HTML을 랜더링한다
- 백엔드 서버에서 HTML을 동적으로 렌더링 처리해준다
- 타임리프는 네츄럴 템플릿이다.
- 타임리프는 th 속성을 알고, HTML은 th 속성을 모른다. 따라서 HTML은 타임리프의 th 속성을 무시해서, 순수 HTML 파일만 열어도 잘 열린다.
- 타임리프는 HTML을 유지하기 때문에 웹 브라우저에서 파일을 직접 열어도 내용 확인이 가능하다. 서버를 거쳐서 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있다.
- JSP는 이와 대조적으로 소스보기 사용 시, JSP 코드 + HTML 코드가 섞여있다.
타임리프 문법 알아보기 전, START 페이지
#resources > static > index.html
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>텍스트
<ul>
<li><a href="/basic/text-basic">텍스트 출력 기본</a></li>
<li><a href="/basic/text-unescaped">텍스트 text, utext</a></li>
</ul>
</li>
<li>표준 표현식 구문
<ul>
<li><a href="/basic/variable">변수 - SpringEL</a></li>
<li><a href="/basic/basic-objects?paramData=HelloParam">기본 객체들</a></li>
<li><a href="/basic/date">유틸리티 객체와 날짜</a></li>
<li><a href="/basic/link">링크 URL</a></li>
<li><a href="/basic/literal">리터럴</a></li>
<li><a href="/basic/operation">연산</a></li>
</ul>
</li>
<li>속성 값 설정
<ul>
<li><a href="/basic/attribute">속성 값 설정</a></li>
</ul>
</li>
<li>반복
<ul>
<li><a href="/basic/each">반복</a></li>
</ul>
</li>
<li>조건부 평가
<ul>
<li><a href="/basic/condition">조건부 평가</a></li>
</ul>
</li>
<li>주석 및 블록
<ul>
<li><a href="/basic/comments">주석</a></li>
<li><a href="/basic/block">블록</a></li>
</ul>
</li>
<li>자바스크립트 인라인
<ul>
<li><a href="/basic/javascript">자바스크립트 인라인</a></li>
</ul>
</li>
<li>템플릿 레이아웃
<ul>
<li><a href="/template/fragment">템플릿 조각</a></li>
<li><a href="/template/layout">유연한 레이아웃</a></li>
<li><a href="/template/layoutExtend">레이아웃 상속</a></li>
</ul>
</li>
</ul>
</body>
</html>
타임 리프 기본 표현식
- 간단한 표현 :
- 변수 표현식 : ${...}
- 선택 변수 표현식 : *{...}
- 메세지 표현식 : #{...}
- 링크 URL 표현식 : @{...}
- 조각 표현식 : ~{...}
- 문자 연산:
- 문자 합치기 : +
- 리터럴 대체 : |The name is ${name}|
- 조건 연산 :
- If-Then : (if) ? (then)
- If-Then-else : (if) ? (then) : (else)
- default: (value) ?: (defaultValue)
타임리프로 텍스트 출력하기 → text, utext
기본은 text(escpae)
위는 text와 utext를 사용했을 때의 차이를 보여준다. utext는 문자열에 포함된 데이터를 HTML 태그 자체로 읽고, text는 문자열에 포함된 태그를 문자열 그대로 읽는다. 기본적으로는 escape(Text)를 사용하고 필요할 때만 unEscape(utext)를 사용하도록 하자.
text(escape)
<li>th:text 사용 <span th:text="${data}"></span></li>- th:text="${...}" : 형태로 출력이 가능하다.
utext(Unescape)
<li>th:utext 사용 <span th:utext="${data}"></span>- data를 넘겨줄 때, HTML 태그를 직접 넣어서 표현해주고 싶을 때 사용한다
- "<b>Spring Data</b>"
변수표현식(Spring EL)
스프링이 내부 객체에 접근하는 방식을 타임리프에서 가져와서 그대로 사용한다. 스프링이 뷰 템플릿으로 Model을 넘겨주면, 해당 Model에 저장해둔 변수를 꺼내서 사용해준다.
Object(객체 접근시)
- ${user.username} → Java Bean Property 전근법. 자동으로 getUserName()으로 가져온다
- ${user['username']}
- ${user.getUsername()}
LIst
- ${user[0].username} → list.get(0).getUsername()
- ${user[0]['username']}
- ${user[0].getUsername}
Map
- ${userMap['userA'].username} → map.get("userA").getUsername()
- ${userMap['userA']['username']}
- ${userMap['userA'].getUsername()}
URL 링크
타임리프에서 URL을 생성할 때에는 @{...} 문법을 사용한다.
기본 URL 링크 사용하기
@{/hello}- 기본 URL 링크는 위처럼 사용이 가능하다
쿼리 파라미터로 사용하기
@{/hello(param1 = ${param1}, param2 = ${param2})}- 쿼리 파라미터는 위와 같이 사용이 가능하다.
- URL 뒷쪽에 (...)안에 key = value 형식으로 표현을 해주면 된다.
- /hello?param1=param1¶m2=param2 형식으로 출력됨
PathVariable로 사용하기
@{/hello/{param1}/{param2}(param1 = ${param1}, param2 = ${param2})}- 경로에 {...} 형식으로 값을 넣어주면 pathVariable로 인식한다.
- URL이 끝난 뒷쪽에 (...)에 pathVariable에 대한 값을 대입해주어야 한다.
PathVariable + 쿼리 파라미터 동시에 넣기
@{/hello/{param1}(param1 = ${param1}, param2 = ${param2})}- {...}로 표현된 param1은 PathVariable로 사용된다.
- param2는 {...} 형태로 사용되지 않았기 때문에 마지막에 쿼리 파라미터 형식으로 들어간다.
타임리프 리터럴 사용하기
작은 따옴표로 감싸거나, 리터럴 대체를 써라.
<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> 리터럴 대체 = <span th:text="|hello ${data}|"></span></li>- 타임리프에서 " "(큰 따옴표)로 감싸면 스페이스가 있는 부분이 있으면, 하나의 의미있는 토큰으로 인식되지 않아 오류가 난다. " "(큰 따옴표)로 감싼다면, 공백을 주의해야한다.
- 타임리프에서 문자열은 항상 ' ' (작은 따옴표)로 감싸야한다. ' '(작은 따옴표)로 감쌀 경우 스페이스 부분도 하나의 토큰으로 인정해준다. 대신에 문자열끼리 합칠 때는 합연산으로 해야한다.
- 편의를 위해서 리터럴 대체 문자열(|...|)을 사용하면 매우매우 편하다.
타임리프 반복
타임리프는 th:each 기능을 활용해서 여러 반복을 할 수 있다.
<tr th:each="user, userStat : ${users}">
</tr>- th:each로 사용하고, ${...}로 iteratable한 변수를 가져온다.
- 첫번째 변수명은 내가 지정해야하고, 두번째 변수명은 지정해도 되고 안해도 된다.
- 두번째 변수명을 지정하지 않으면 첫번째 변수명 + Stat으로 접근이 가능하고, 이것은 반복되는 현재 상태를 알려주는 역할을 한다.
- userStat에는 count, even, odd, index, size, current, first, last 같은 여러가지 기능이 있다.
타임리프 조건문 If, Unless
타임리프의 조건문 If, Unless는 해당 조건을 만족하면 해당 태그가 랜더링된다. 만약에 조건을 만족하지 않으면, 해당 태그는 무시된다.
<span th:text="'미성년자'" th:if="${user.age} lt 20"></span>
<span th:text="'미성년자'" th:unless="${user.age ge 20}"></span>
타임리프의 Switch문
<td th:switch="${user.age}">
<span th:case="10">10살</span>
<span th:case="20">20살</span>
<span th:case="*">기타</span>
</td>- 타임리프의 Switch문은 th:switch=으로 case에 대한 변수값을 선언한다.
- Case는 th:case=" "으로 선언한다. 이 때, th:switch로 선언된 변수의 값에 따라 다르게 동작한다
- th:case="*"은 나머지 모든 케이스를 의미한다.
타임리프의 입력 폼 처리
타임리프는 입력 폼 처리할 때, 좀 더 편리하게 처리할 수 있도록 아래 기능을 지원해준다.
- th:object : 커맨드 객체를 지정한다.
- *{...} : 선택 변수식. 커맨드 객체를 생략하고 바로 Properties로 접근가능하다.
- *를 사용하지 않고 ${...}으로 커맨드 객체에 바로 접근해도 된다.
- th : field
- HTML 태그의 id, name, value 속성을 자동으로 처리해준다.
th:object에 대해서
- th:object를 사용해서 FORM에서 사용할 객체를 지정해준다.
- 서버에서 값을 주고 받고 수정해서 다시 전달할 때 유용하다.
- GET → Thymeleaf로 넘어온 객체를 Object로 설정한다.
- Thymeleaf → FORM으로 다시 한번 사용될 수 있다.
- th:object는 태그에 설정된 속성으로 해당 태그 내에서만 유효하게 사용된다.
AddForm 컨트롤러 만들기.
@GetMapping("/add")
public String addForm(Model model) {
model.addAttribute("item", new Item());
return "form/addForm";
}
AdForm
타임리프의 action
<form role="form" action= th:object="${memberJoinForm}"타임리프에서 action의 값을 비워두면 입력이 동일한 URL로 자동으로 지정됨.
'Spring > Spring MVC' 카테고리의 다른 글
| Spring MVC : Validation (0) | 2021.12.26 |
|---|---|
| Spring MVC : 메세지 기능 구현 (0) | 2021.12.26 |
| Spring MVC : HTTP 메세지 컨버터 (0) | 2021.12.23 |
| Spring MVC : 정적 리소스, 뷰 템플릿, HTTP API (0) | 2021.12.22 |
| Spring MVC : HTTP 요청 데이터 받기 (0) | 2021.12.22 |