[StringBoot] Thymeleaf 문법! 정리✔

728x90

Thymeleaf

타임리프는 View Templete Engine 으로 JSP, Freemarkerd와 같이 서버에서

클라이언트에게 응답할 브라우저 화면을 만들어주는 역할을 한다.

타임리프의 주 목표는 템플릿을 만들때 유지관리가 쉽도록 하는 것이다.

디자인 프로토타입으로 사용되는 템플릿에 영향을 미치지 않는 방식인 Natural Templates 기반

Natural Templates : 기존 HTML 코드와 구조를 변경하지 않고 덧붙이는 방식

Tymeleaf 장점

코드를 변경하지 않기때문에 디자인팀과 개발팀간의 협업이 편하다
JSP와 달리 ServletCode로 변환되지 않기 때문에 비즈니스 로직과 분리되어 오로지 View에 집중할 수 있다
서버상에서 동작하지 않아도 되기 때문에 서버 동작 없이 화면을 확인 할 수 있다

1. 타임리프 의존성 추가

build.gradle 에 dependency 추가

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

2. 타임리프를 적용할 HTML 문서에 네임스페이스 추가

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

순수한 HTML으로만 작성된 페이지에는 선언하지 않아도 된다.
th속성을 사용하기 위한 네임스페이스

표현식

변수	${...}
선택 변수	*{...}
메세지	#{...}
Link URL	@{...}

비교연산

if-then	(if) ? (then)
if-then-else	(if) ? (then) : (else)
Default	(value) ?: (defaultValue)

text opeation

문자열 연결	+
문자 대체	\|The name is ${name}\|

기본 기능

th:text="${}"

<div th:text="${data}"></div>

${} 표현식을 사용해서 컨트롤러에서 전달받은 데이터에 접근할 수 있다.

th:href="@{}"

<body>
  <a th:hrf="@{/boardListPage?currentPageNum={page}}"></a>
</body>

<a> 태그의 href 속성과 동일하다.
괄호안에 클릭시 이동하고자하는 url를 입력하면 된다.

th:with="${}"

<div th:with=”userId=${number}” th:text=”${usesrId}”>

변수형태의 값을 재정의하는 속성이다. 즉, th:with를 이용하여 새로운 변수값을 생성할 수 있다.

th:value="${}"

<input type="text" id="userId" th:value="${userId} + '의 이름은 ${userName}"/>

input의 value에 값을 삽입할 때 사용한다.
여러개의 값을 넣을땐 + 기호를 사용한다

Layout

xmlns:layout="", layout:decorator=""

<html lang="ko" 
xmlns:th="http://www.thymeleaf.org" 
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" 
layout:decorate="~{board/layout/basic}">

의존성

implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'

타임리프의 layout 기능을 사용하기 위해서는 의존성을 추가해줘야 한다.
xmlns:layout은 타임리프의 레이아웃 기능을 사용하기 위한 선언이다.
레이아웃을 적용시킬 HTML 파일에 해당 선언을한다.
그리고 해당 페이지에 th:fagment로 조각한 공통 영역을 가져와서 삽입해준다.

th:block

<html lagn="ko" 
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<body>
  	//전체 레이아웃
	<th:block th:fragment="footerFragment">
 	</th:block>
</body>  
  
</html>

block은 타임리프 표현을 어느 곳에서든 사용할 수 있도록 하는 구문이다.
해당 기능은 동적인 처리가 필요할 때 사용된다. 주로 layout기능이나 switch에 사용이 많이 된다.

th:fragment=""

<body>

<footer th:fragment="footerFragment">
  <p>안녕하세요</p>
</footer>

</body>

웹페이지에 메뉴 탭이나 네비게이션바와 같이 공통으로 반복되는 영역이 존재한다. 이 공통의 역영들을 매 페이지마다 HTML코드를 반복해서 쓰면 굉장히 지저분 해지는데 fragment가 바로 공통 영역을 정의하여 코드를 정리해준다.
특히, header와 footer에 삽입하여 조각화 한다. 이렇게 만들어진 조각을 삽입하고자 하는 대상 HTML 파일에서 th:replace"[파일경로 :: 조각 이름]"을 통해 삽입한다.

th:replace="~{파일경로 :: 조각이름}"

<body>
  <div th:replace="~{/common/footer :: footerFragment}"></div>  
</body>

fragment로 조각화한 공통 영역을 HTML에 삽입하는 역할을 한다.
::을 기준으로 앞에는 조각이 있는 경로를 뒤에는 조각의 이름을 넣어준다.

th:insert="~{파일경로 :: 조각이름}"

<body>
  <div th:insert="~{/common/footer :: footerFragment}"></div>  
</body>

insert는 태그 내로 조각을 삽입하는 방법이다.
replace는 완전하게 대체하기 때문에 replace 태그 가 입력된 <div>가 사라지고 fragment로 조각화한 코드가 완전히 대체된다.
하지만 insert는 insert가 입력된 <div> 안에 fragment를 삽입하는 개념이기 때문에 <div>안에 조각화한 코드가 삽입된다.
형식은 replace와 동일하다.

Form

<body>
  <form th:action="@{/join}" th:object="${joinForm}" method="post">
    <input type="text" id="userId" th:field="*{userId}" >
    <input type="password" id="userPw" th:field="*{userPw}" >
  </form>
</body>

th:action="@{}"

<form> 태그 사용시, 해당 경로로 요청을 보낼 때 사용한다.

th:object="${}"

<form> 태그에서 데이터를 보내기 위해 Submit을 할 때 데이터가 th:object 속성을 통해 object에 지정한 객체에 값을 담아 넘긴다. 이때 값을 th:field속성과 함꼐 사용하여 넘긴다.
Controller와 View 사이의 DTO클래스 객체라고 생각하면 된다.

th:field="*{}"

th:object속성과 함께 th:field를 이용해서 HTML 태그에 멤버 변수를 매핑할 수 있다.
th:field을 이용한 사용자 입력 필드는 id, name, value 속성 값이 자동으로 매핑된다.
th:object와 th:field는 Controller에서 특정 클래스의 객체를 전달 받은 경우에만 사용 가능하다.

조건문과 반복문

th:if="${}", th:unless="${}"

<span th:if="${userNum} == 1"></span> 
<span th:unless="${userNum} == 2"></span>

JAVA의 조건문에 해당하는 속성이다. 각각 if와 else를 뜻한다.
th:unless는 일반적인 언어의 else 문과는 달리 th:if에 들어가는 조건과 동일한 조건을 지정해야 한다.

th:each="변수 : ${list}"

<body>
  <li th:each="pageButton" : ${#numbers.sequece(paging.firstPage, paging.lastPage)}></li>
</body>

JSP의 JSTL에서 <c:foreach> 그리고 JAVA의 반복문 중 for문을 뜻한다.
${list}로 값을 받아온 것을 변수로 하나씩 가져온다는 뜻으로, 변수는 이름을 마음대로 지정할 수 있다.

th:switch, th:case

<th:block th:switch="${userNum}"> 
  <span th:case="1">권한1</span> 
  <span th:case="2">권한2</span> 
</th:block>

JAVA의 switch-case문과 동일하다.
switch case문으로 제어할 태그를 th:block으로 설정하고 그 안에 코드를 작성한다.
userNum라는 변수의 값이 1이거나 2일때 동작하는 예제이다.

Number.sequest

#numbers.sequest(start, end, step)

기본적으로 타임리프에서는 #numbers라는 숫자 포맷 메소드를 지원한다. #numbers에는 다양한 메소드들이 존재하는데 가장 많이 사용하는 것이 #numbers.sequece이다.
#numbers.sequece 메소드는 start, end, step을 이용하여 원하는 범위에 대해 시퀀스를 생성해준다.

정리원본링크 : https://velog.io/@alicesykim95/Thymeleaf

Spring Thymeleaf 기본 문법

타임리프(Thymeleaf)는 View Templete Engine으로 JSP, Freemarkerd와 같이 서버에서 클라이언트에게 응답할 브라우저 화면을 만들어주는 역할을 한다. 타임리프의 주 목표는 템플릿을 만들 때 유지관리가 쉽

velog.io

정리원본링크 : https://velog.io/@devharrypmw/Thymeleaf-%ED%83%80%EC%9E%84%EB%A6%AC%ED%94%84-%EA%B8%B0%EB%B3%B8%EB%AC%B8%EB%B2%95

[Thymeleaf] 타임리프 - 기본문법1

타임리프(Thymeleaf) 기본문법

velog.io

728x90

'STUDY > SpringBoot' 카테고리의 다른 글

[SpringBoot] 22-08-04 자바와 html을 이용한 게시판예제 (1) ☑ (0)	2022.08.05
[SpringBoot] 스프링 입문 - 김영한 ✔정리(2) (0)	2022.08.02
[SpringBoot] 스프링 입문 - 김영한 ✔정리(1) (0)	2022.08.02
[SpringBoot] gradle 배포 + 클라우드 배포 (0)	2022.08.01
[SpringBoot] BootStrap 레이아웃 정리✔ [2] (0)	2022.07.31

Thymeleaf

Tymeleaf 장점

표현식

비교연산

text opeation

기본 기능

th:text="${}"

th:href="@{}"

th:with="${}"

th:value="${}"

Layout

xmlns:layout="", layout:decorator=""

th:block

th:fragment=""

th:replace="~{파일경로 :: 조각이름}"

th:insert="~{파일경로 :: 조각이름}"

Form

th:action="@{}"

th:object="${}"

th:field="*{}"

조건문과 반복문

th:if="${}", th:unless="${}"

th:each="변수 : ${list}"

th:switch, th:case

Number.sequest

#numbers.sequest(start, end, step)

'STUDY > SpringBoot' 카테고리의 다른 글

티스토리툴바