본 포스팅은 인프런 - 스프링 MVC 2편을 강의를 바탕으로 공부하고 정리한 글입니다.
타임리프는 스프링 부트에서 공식적으로 지원하는 뷰(View) 템플릿이다.
JSP와 달리 Thymeleaf 문서는 html 확장자를 갖고 있어 JSP처럼 Servlet이 문서를 표현하는 방식이 아니기 때문에 서버 없이도 동작이 가능하다.
이번 포스팅에서는 타임리프 뷰 템플릿 사용법에 대해 간단히 알아볼 예정이다.
스프링 부트 설정
👉🏻 타임리프 라이브러리 추가
📂 build.gradle
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}- 스프링 부트가 자동으로 ThymeleafViewResolver와 필요한 스프링 빈들을 등록한다.
👉🏻 타임리프 설정 변경
📂 application.properties
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html- 타임리프는 스프링 설정을 통해 해당 뷰 리졸버에서 뷰 템플릿의 물리적 경로를 완성할 때 접두사나 접미사를 변경해줄 수 있다.
- 이 설정은 기본 값이기 때문에 변경이 필요할 때만 설정하면 된다.
스프링 부트의 타임리프 관련 추가 설정은 공식 사이트를 참고하자. (페이지 안에서 thymeleaf 검색)
👉🏻 타임리프 사용 선언
타임리프를 HTML 페이지에서 사용하려면 상단 <html> 태그 내부에 다음과 같이 작성해준다.
<html xmlns:th="http://www.thymeleaf.org">
타임리프 핵심
- 핵심은 th:xxx가 붙은 부분은 서버사이드에서 렌더링 되고, 기존 것을 대체한다는 것이다.
- th:xxx이 없으면 기존 html의 xxx속성이 그대로 사용된다.
- HTML을 파일로 직접 열었을 때, th:xxx가 있어도 웹 브라우저는 th: 속성을 알지 못하므로 무시한다.
따라서 HTML을 파일 보기를 유지하면서 템플릿 기능도 할 수 있다.
타임리프는 순수 HTML을 파일을 웹 브라우저에서 열어도 내용을 확인할 수 있고, 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있다.
JSP를 생각해보면, JSP 파일은 웹 브라우저에서 그냥 열면 JSP 소스코드와 HTML이 뒤죽박죽 되어서 정상적인 확인이 불가능하다. 오직 서버를 통해서 JSP를 열어야 한다.
이렇게 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 네츄럴 템플릿 (natural templates)이라 한다.
타임리프 문법
URL 링크 표현식 - @{...}
👉🏻 링크 표현식1
<th:href="@{/css/bootstrap.min.css}">- 타임리프는 URL링크를 사용하는 경우 @{...}를 사용한다.
- 이것을 URL 링크 표현식이라 한다.
👉🏻 링크 표현식2
<th:href="@{/basic/items/{itemId}(itemId=${item.id})}">- URL링크 표현식을 사용해 경로를 템플릿처럼 편리하게 사용할 수 있다.
- 경로 변수({itemId}) 뿐만 아니라 쿼리 파라미터도 생성한다.
- 예) th:href="@{/basic/items/{itemId}(itemId=${item.id}, query='test')}"
➡ 생성링크 : http://localhost:8080/basic/items/1?query=test
- 예) th:href="@{/basic/items/{itemId}(itemId=${item.id}, query='test')}"
👉🏻 링크 표현식 간단히
<th:href="@{|/basic/items/${item.id}|}">- 리터럴 대체 문법을 활용해 간단히 사용할 수도 있다.
리터럴 대체 - |...|
<th:onclick="|location.href='@{/basic/items/add}'|">- 타임리프에서 문자와 표현식 등은 분리되어 있기 때문에 더해서 사용해야 한다.
- 예) <span th:text=" 'welcome to our application, ' + ${user.name} + '!' ">
- 예) th:onclic=" 'location.href=' + '\'' + @{/basic/items/add} + '\'' "
- 이 경우 리터럴 대체 문법을 사용하면, 더하기 없이 편리하게 사용할 수 있다.
- 예) <span th:text=" |welcome to our application, ${user.name} !| ">
- 예) th:onclick=" |location.href='@{/basic/items/add}'| "
반복 출력 - th:each
<tr th:each="item : ${items}">- 반복은 th:each를 사용한다.
- 모델에 포함된 items 컬렉션 데이터가 item 변수에 하나씩 포함되고, 반복문 안에서 item 변수를 사용할 수 있다.
- 컬렉션 수 만큼 <tr>...</tr> 하위 태그를 포함해서 생성된다.
변수 표현식 - ${...}
<td th:text="${item.price}">10000</td>- 모델에 포함된 값이나, 타임리프 변수로 선언한 값을 조회할 수 있다.
- 프로퍼티 접근법을 사용한다. → item.getprice()
내용 변경 - th:text
<td th:text="${item.price}">10000</td>- 내용의 값을 th:text의 값으로 변경한다.
- 여기서는 10000을 @{item.price}의 값으로 변경한다.
속성 변경 - th:href, th:onclick
대부분의 HTML 속성을 th:xxx로 변경할 수 있다.
👉🏻 th:href
<link th:href="@{/css/bootstrap.min.css}"
href="../css/bootstrap.min.css" rel="stylesheet">- 기존의 href="value1"을 th:href="value2"의 값으로 변경해준다.
- 타임리프 뷰 템플릿을 거치게 되면 원래 값을 th:xxx 값으로 변경한다. (만약 값이 없다면 새로 생성)
- HTML을 직접 열어 볼 경우엔 기존의 href 속성이 사용되고, 뷰 템플릿을 거치면 th:href의 값이 href로 대체되면서 동적으로 변경할 수 있다.
👉🏻 th:onclick
<button class="btn btn-primary float-end"
onclick="location.href='addForm.html'"
th:onclick="|location.href='@{/basic/items/add}'|"
type="button">상품 등록
</button>- 리터럴 대체 문법(|...|)이 사용되었다.
'🌱 Spring > Web MVC' 카테고리의 다른 글
| 로그인 (필터, 인터셉터) (0) | 2022.05.10 |
|---|---|
| 로그인 (쿠키, 세션) (0) | 2022.05.02 |
| Bean Validation (0) | 2022.04.30 |
| Validation (0) | 2022.04.26 |
| 스프링 MVC 웹 페이지 만들기 (0) | 2022.03.22 |
| 로깅 (0) | 2022.03.18 |
| 스프링 MVC 기본 기능 (0) | 2022.03.18 |
| 스프링 MVC 구조 이해하기 (0) | 2022.03.17 |
