Thymeleaf 기초 공부
** 타임리프란?
: View에 해당하는 화면을 구현할 때 사용하는 템플릿 엔진
타임리프 뷰 템플릿 활용하기
1. ThymeleafViewResolver 등록하기
- Gradle - build.gradle 에 추가
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'- Maven - pom.xml 에 추가
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2. 타임리프를 사용할 html 파일에 태그 수정
<html xmlns:th="http://www.thymeleaf.org">
** 기초 문법
| 표현 | 설명 | 예제 |
| @{ ... } | url 링크 표현식 | th:href = "@{/css/bootstrap.min.css}" |
| | ... | | 리터럴 대체 | th:text = "|Hi ${user.name}!|" |
| ${ ... } | 변수 | th:text = ${user.name} |
| th:each | 반복 출력 | <tr th:each = "item: ${items}"> <td th:text = "${item.price}">100</td> </tr> |
| *{ ... } | 선택 변수 | <tr th:object = "${items}"> <td th:text = "*{price}">100</td> </tr> |
| # { ... } | 메시지. properties 같은 외부 자원에서 코드에 해당하는 문자열 get | th:text = "#{member.register}" |
th:xxx 가 붙으면 서버 사이드에서 렌더링... 이는 웹 브라우저에 표시되지 않는다.
1) th:text= "${ ... }" >> 컨트롤러에서 전달받은 데이터에 접근 가능
2) th:href = "@{ ... }" >> 클릭시 이동
3) th:with="${ ... }" >> 변수형태의 값을 재정의하는 속성 :: 새로운 변수값을 생성할 수 있음.
<div th:with=”userId=${number}” th:text=”${userId}”>4) th:value = "${ ... }" >> input의 value값을 넣을 때 사용. 여러개 값을 넣을 때는 + 기호 사용.
<input type="text" id="userId" th:value="${userId} + '의 이름은 ${userName}"/>
5) th:block >> 타임리프 표현을 어느 곳에서든 사용할 수 있도록 하는 구문. > 동적 처리가 필요할 때 사용됨. 주로 layout 기능이나 switch 에 사용됨.
6) th:fragment = "" >> 웹페이지에 공통의 영역을 정의. 특히 header와 footer에 삽입하여 조각화함.
조각을 삽입하고자 하는 HTML 파일에 th:replace"[파일경로 :: 조각이름]"을 통해 삽입.
7) th:replace >> th:fragment를 통해 설정한 이름을 찾아 해당 코드로 치환함.
8) th:action >> <form>태그 사용시 해당 경로로 요청을 보낼 때 사용.
9) th:object >> <form>태그에서 submit할 때 데이터가 설정 객체로 받아진다. (즉, 컨트롤러와 뷰 사이의 DTO 클래스 객체)
<form class="form-horizontal" th:action="@{/board/register.do}" th:object="${board}" method="post">10) th:field >> th:object 속성을 이용하면 th:field를 이용해서 HTML 태그에 멤버 변수를 매핑할 수 있음.
속성 값이 자동으로 매핑된다. (각 속성을 따로 지정할 필요가 없음) 이 때 *{} 표현식을 사용한다.
<input type="text" th:field="*{title}" class="form-control" placeholder="제목을 입력해 주세요." />* th:object와 th:field는 컨트롤러에서 특정 클래스의 객체를 전달 받은 경우만 사용 가능!!!
11) th:checked >> 체크박스의 경우 조건이 true이면 checked 속성 적용
12) th:if / th:unless >> if문/else문.
'Programming > Frontend (HTML, CSS)' 카테고리의 다른 글
| CSS Box Model (0) | 2023.12.14 |
|---|---|
| CSS (0) | 2023.12.13 |
| HTML (2) | 2023.12.12 |
| Frontend 개요 (0) | 2023.12.12 |
| 기본 HTML 태그 (0) | 2023.08.29 |
