관심쟁이 영호
[Thymeleaf]#1 타임리프 기본 기능 ㅣ text, SpringEL, 기본 객체 본문
백엔드 공부를 하면서, 많은 고충이 있었다. 그중 가장 많이 맞닿은 문제는 뷰에서의 문제였다.
내가 구현한 내용을 눈으로 확인하고 싶지만 프론트에 대한 지식이 부족하여 발목이 많이 잡혔다.
맷돌에 손잡이가 없어서 맷돌을 사용하면 안되니까!
이번 기회에 확실하게 공부를 하자.
목차
- Thymeleaf란?
- Thymeleaf에 변수, 객체 넘기기
- Thymeleaf 사용 선언
- Thymeleaf 간단한 표현
- text
- SpringEL
- URL 링크
- 속성 값 설정
- 조건부 평가
Thymeleaf란?
이번에 기록을 하며 확실하게 정리하고 넘어가 보자.
가장 먼저 "템플릿 엔진"에 대해서 알아야 한다.
템플릿 엔진
- 템플릿 엔진은 웹 문서를 출력하는 엔진이다. 개발을 진행하면서 자바 코드 - html 코드 간의 상이함을 최대한 줄여주기 위해서 나온 엔진이라고 생각하면 된다.
- 템플릿 엔진을 사용하면 html 문서 내에서 자바 코드를 사용할 수 있는 장점이 있다.
- 그 외 연산, 객체 등등의 기능을 수행할 수 있다.
Thymeleaf
- Thymeleaf는 수많은 템플릿 엔진 중에 하나이다.
- 스프링 진영에서 가장 많이 쓰이는 엔진 중에 하나이다. 이유는 스프링에서 자체적으로 Thymeleaf에 대한 기능을 제공하기 때문이다.
- Thymeleaf는 html의 모양을 최대한 유지하려는 특징이 있다.
※ 나는 스프링을 공부할 거니까.. Thymeleaf를 공부하는 것! 더 이상 뷰 때문에 스트레스받고 싶지 않다.
Thymeelaf에 변수, 객체 넘기기
스프링에서는 model에 추가해놓으면, Thymeleaf가 사용할 수 있다.
코드는 다음과 같다.
User objectUser = new User()
Map<String, User> map = new HashMap<>();
int a;
//변수 담기
model.addAttribute("var", a);
//객체 담기
model.addAttribute("Object", ObjectUser);
//Map 담기
model.addAttribute("Map", map);
이렇게 model에 담고 템플릿을 리턴하면
해당 템플릿에서 model에서 변수, 객체, Map 등을 꺼내서 사용할 수 있다.
Thymeleaf 사용 선언
Thymeleaf를 사용하기 위해서는 <html> 태그에 thymeleaf를 사용한다는 선언을 해주어야 한다.
하는 법은 다음과 같다.
<html xmlns:th="http://www.thymeleaf.org">
</html>
Thymeleaf 간단한 표현
- 변수 표현식 : ${~}
- 선택 변수 표현식: *{~}
- 메시지 표현 : #{~}
- URL 표현: @{~}
- 비교 : >, <, >=, <=, (gt, lt, ge, le)
등이 있다.
아래에서 다른 이론에 적용해보면서 익혀보자.
text
텍스트를 출력하는 기능이다.
아래와 같이 사용한다.
<div th:text="${data}">이렇게 사용하면
Model에 담겨있는 "data"에 해당하는 값을 출력한다.
SpringEL
타임리프에서는 변수 표현식을 사용한다.
위와 같이 "${~}"를 사용한다.
Object에서의 사용
<ul>Object
<li>${user.username} = <span th:text="${user.username}"></span></li>
<li>${user['username']} = <span th:text="${user['username']}"></span></li>
<li>${user.getUsername()} = <span th:text="${user.getUsername()}"></span></li>
</ul>코드 설명:
- user.username : user의 username을 프로퍼티 접근법으로 접근한다. (user.getUsername())
- user ['username']: 위와 같은 방식으로 접근한다.
- user.getUsername(): 직접 호출한다.
List에서의 사용
<ul>List
<li>${users[0].username} = <span th:text="${users[0].username}"></span></li>
<li>${users[0]['username']} = <span th:text="${users[0]['username']}"></span></li>
<li>${users[0].getUsername()} = <span th:text="${users[0].getUsername()}"></span></li>
</ul>코드 설명:
- users[0].username : users라는 리스트에서 0에 해당하는 index를 찾고 프로퍼티 접근을 한다.
- 나머지는 위의 Object와 같다.
Map에서의 사용
<ul>Map
<li>${userMap['userA'].username} = <span th:text="${userMap['userA'].username}"></span></li>
<li>${userMap['userA']['username']} = <span th:text="${userMap['userA']['username']}"></span></li>
<li>${userMap['userA'].getUsername()} = <span th:text="${userMap['userA'].getUsername()}"></span></li>
</ul>코드 설명:
- userMap['userA'].username : Map에서 userA를 찾고, 프로퍼티 접근을 한다.
- 나머지는 위의 Object와 같다.
URL 링크
Thymeleaf에서는 @{~} 으로 url을 표현한다.
아래의 코드를 보자.
<li><a th:href="@{/login}">basic url</a></li>
<li><a th:href="@{/login(param1=${param1}, param2=${param2})}">hello queryparam</a></li>
<li><a th:href="@{/login/{param1}/{param2}(param1=${param1}, param2=${param2})}">path variable</a></li>
<li><a th:href="@{/login/{param1}(param2=${param2})}">path + query param</a></li>코드 설명:
- 단순 URL : @{/login}으로 표현한다.
- 쿼리 파라미터 : @{/login(param1=${param1}, param2=${param2})}는 /hello?param1=data¶m2=data2로 변환된다.
- 경로 변수: @{/login/{param1}/{param2}(param2}(param1=${param1}, param2=${param2})}는 /login/data1/data2로 변환된다.
- 경로 변수 + 쿼리 파라미터 : @{/login/{param1}(param2=${param2})}는 /login/data1?param2=data2로 변환된다.
속성 값 설정
타임리프에서는 속성 값을 변경할 수 있다. 다음 코드를 살펴보자!
<h1>속성 추가</h1>
- th:attrappend = <input type="text" class="text" th:attrappend="class='large'" /><br/>
- th:classappend = <input type="text" class="text" th:classappend="large" /><br/>
- checked o <input type="checkbox" name="active" th:checked="true" /><br/>이렇게 하면 th로 설정한 내용대로 속성 값이 변경되거나 추가된다.
조건부 평가
if와 같다고 생각하자
크게 if와 unless로 두 가지가 있다. unless는 if의 반대 문법이다.
<span th:text="'미성년자'" th:if="${user.age lt 20}"></span>
<span th:text="'미성년자'" th:unless="${user.age ge 20}"></span>이렇게 하면
해당 조건이 false인 경우 렌더링 자체가 되지 않고 사라진다.
오늘은
여기까지만 알아보고
추후에 더 알아보자!