학원에서 jsp를 쓰다가 인턴활동을 하면서 tyhmleaf를 알게됐다!
알고나니 너무 유용하다!
- Tyhmleaf란?
Thymeleaf는 View Template Engine입니다. 그리고 컨트롤러에서 전달받은 데이터를 이용해 동적인 페이지를 만들 수 있습니다.
태그의 속성으로 thymeleaf 명령어를 사용할 수 있으며 html 파일 내에서 사용이 가능합니다.
SpringBoot를 이용한다면
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'dependencies에 추가를 해주고,
maven을 이용한다면 maven용을 pom.xml에 넣어준다! maven repository에 가면 있으니까 잘 찾아보시면 됩니다~!
2. Tyhmleaf 표현식
- th:each | each문을 이용하여 반목문을 표현한다.
- th:text | 태그 내에 text를 수정해준다.
- th:value | 태그 내에 value를 수정해준다.
- th:if, th:unless | 조건문을 설정할 수 있다.
- th:switch, th:case | switch문을 이용해 조건문을 표현합니다.
- th:href @{...} | 링크 URL을 설정할 수 있다.
- ${...} 표현식 | ${...} 표현식을 이용해 컨트롤러에서 전달받은 변수에 접근할 수 있으며 th:속성명 내에서만 사용할 수 있다.
Tyhmleaf에는 표현식도 다양한데 자주 쓰는 표현식 위주로 가져왔다.
3. Tyhmleaf 예제
@GetMapping("/companySearch")
public String companySearch(Model model) {
List<Company> companies = new ArrayList<Company>();
companies = orderservice.selectAllCompany();
model.addAttribute("company", companies);
return "insert/companySearch";
}Controller에서 select한 값들을 List에 담았다면 model로 ("key", value)로 가져갈 수 있는 것이다!
이때 Map형식으로 넣었다면 map.put속성을 이용하여 ("key", value)로 가져갈 수 있다.
<option th:each="c:${company}" th:value="${c.companyno}" th:text="${c.companynm}"></option>
html에서 이런식으로 사용가능하다!
th:each로 리스트로 담은 company를 반복문을 이용하여 뿌릴 수 있다. 이때 "c:${company}" 의 'c'는 company를 변수화 시켜준 것이고 {} 에 들어가는 company는 controller에서 key값으로 보낸 이름이다! 이 이름을 다르게 가지고 오면 데이터를 받아올 수 없고, 오류가 날 수 밖에 없다!!
th:value값으로 ${c.companyno}를 주게 되면 company리스트 안의 companyno를 option태그의 value값으로 촤르륵 가지고 오는 것이고, th:text값으로는 companynm을 화면단에 글로 보여준다!
이런식으로 value값에 맞춰서 1234순으로 들어오고, companynm을 text값으로 찍어준다!
다른 표현식의 예제로는
<th:block th:switch="${c.siteStatus}">
<td th:case="00">정상</td>
<td th:case="01">중지</td>
<td th:case="02">준비중</td>
</th:block><a th:value="${c.siteId}" th:text="${c.siteId}" th:href="@{/detail(siteId=${c.siteId})}"></a>이렇게 해봤고, 상황에 맞춰서 활용하여 쓰면 된다!
그리고 스크립트 단에서
var result = "[[${resultCode}]]"이렇게 모델로 보낸 객체를 가져올 수 있다! 그러면 스크립트에서도 가공이 가능하기 때문에 유용하다!!
옛날 버전에서는
/*<![CDATA[*/
var result= /*[[${resultCode}]]*/
/*]]>
<![[CDATA]]>를 넣어줘야 한다! 요즘 버전에서는 안넣어줘도 된다고 하는것 같다!
**아 그리고 Thymleaf를 이용하려면 <html xmlns:th="http://www.thymeleaf.org"> html시작 태그에 타임리프를 걸어줘야 사용이 가능하다!!!!
script도 <script th:inline="javascript"> 얘를 넣어줘야 한다!
쓰다보니 tyhmleaf 좋다!