카테고리 없음 2022. 4. 18. 11:22

💡 타임리프?

- 컨트롤러가 전달하는 데이터를 이용해 동적으로 화면을 만들어주는 역할을 하는 뷰 템플릿 엔진

🔎 타임리프 특징

- 서버 사이드 HTML 렌더링 (SSR)

: 서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링 하는 방식

- 네츄럴 템플릿

: 타임리프로 작성한 파일은 HTML을 유지하기 때문에 웹 브라우저에서 파일을 직접 열어도

확인할 수 있고, 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있다.

: 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용

- 스프링 통합 지원

💡 사용하기

📌 라이브러리 추가

- 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>

📌 타임리프 사용 선언

<html xmlns:th="http://www.thymeleaf.org">

🔎 문법

문법	역할	예제
th:text	태그 속성에 데이터 출력	th:text="${data}"
	직접 데이터 출력	[[${data}]]
${...}	변수 사용	${data}
th:with	지역 변수 선언 (선언안 태그 안에서만 사용가능)	th:with="first=${user[0]}" th:text="${first.username}"
@{...}	URL 생성	th:href="@{/hello}"
' '	문자 리터럴	th:text="'hello world!'"
\| \|	문자 리터럴	th:text="\|hello ${data}\|"
th:each	반복	th:each="user : ${users}" th:text="${user.username}" th:text="${user.age}"
th:if th:unless	조건식 조건이 false면 해당 부분 자체는 렌더링 되지 않고 사라진다	th:if="${user.age lt 20}" th:unless="${user.age ge 20}"
th:inline="javascript"	자바스크립트에서 타임리프 사용	<script th:inline="javascript"> </script>

* 비교연산

: > (gt), < (lt), >= (ge), <= (le), ! (not), == (eq), != (neq, ne)

📌 속성 설정

- th:*로 속성을 적용하면 기존 속성을 대체한다, 기존 속성이 없으면 새로 만든다

<input type="text" name="useA" th:name="cho"/>

렌더링 후 -> <input type="text" name="cho">

- checked 처리

: checked 속성의 값과 상관없이 checked라는 속성만 있어도 체크 된다 => th:checked 사용

: th:checked="false"인 경우 속성 자체를 제거한다

<input type="checkbox" name="active" th:checked="false"/>

-> <input type="checkbox" name="active"/>

📌 주석

- 표준 HTML 주석

:

: 타임리프가 렌더링 하지 않고, 그대로 남겨둔다

- 타임리프 파서 주석

:

: 렌더링에서 주석 부분을 제거한다

- 타임리프 프로토타입 주석

:

-> 렌더링 후 <h2>Spring!</h2>

: HTML 파일을 그대로 열어보면 주석처리가 되지만, 타임리프를 렌더링 한 경우에만 보인다

💡 타임리프 스프링 통합

📌 입력 폼 처리

- th:object

ex) th:object="${item}" => 선택 변수 식 *{...} 적용할 수 있다

- th:field

: HTMl 태그의 id, name, value 속성을 자동으로 처리해준다

<input type="text" th:field="*{itemName}">

-> <input type="text" id="itemName" name="itemName" value="">

* *{itemName}은 ${item.itemName}과 같다

-> th:object로 item을 선택했기에 선택 변수 식 적용할 수 있다

📌 checkbox

- HTML checkbox는 선택이 안되면 클라이언트에게 서버로 값 자체를 보내지 않는다

: 원하는 값 false => 히든 필드 사용(무조건 전송된다) <input type="hidden" name="_open" value="on"/>

-> _open이 on인걸보고 open이 체크 안된걸 알 수 있음 open=false

- 타임리프가 제공하는걸 사용해보자

<input type="checkbox" id="open" th:field="*{open}">

=> 자동으로 히든 필드를 생성해준다

- 반복 돌릴때 멀티 체크박스의 id값이 같으면 안된다 (name은 중복 상관없음)

=> ids.prev(...) 사용하면 동적으로 생성되는 id값

* 라디오 버튼은 이미 선택되어 있다면, 수정시에도 항상 하나를 선택하도록 되어 있으므로

체크 박스와 달리 별도의 히든 필드를 사용할 필요가 없다

ABOUT ME

"Hello cmingg World!" "Hello cmingg World!"

💡 타임리프?

💡 사용하기

💡 타임리프 스프링 통합

티스토리툴바