[Thymeleaf]타임리프 기본 기능 사용법 총정리

✨ UI/🖤 View Templates

[Thymeleaf]타임리프 기본 기능 사용법 총정리

뉴이 NUEY 2025. 3. 9. 19:45

이 포스트는 내용이 깁니다.
바쁘거나 맛보기만 보실 분들은 아래 포스트 추천드립니다.

2025.03.03 - [✨ UI/🖤 View Templates] - [Thymeleaf]타임리프 사용법 간단정리

선언
- <html xmlns:th="http://www.thymeleaf.org"> 만 HTML파일에 적어주면 바로 사용가능하다.
text
- code
- 결과
- <span th:text="${data}">
  → 태그 속성으로 데이터를 치환할 때 사용.
- [[${data}]]
  → 컨텐츠 안에서 직접 출력.
- 타임리프는 다음 두 기능 제공한다.
  - th:text → th:text
  - [[...]] → [(...)]
Unescape
- code
  java로직
  
  thymeleaf
- 결과
- escape란 자바에서 html로 넘어올 때 알아서 특수 기호<, / 등을 처리해주는 것을 말한다.
  반대로 unscape란 기호를 처리하지 않고 그대로 내보내는 것을 말한다.
  
  🌞 최대한 기본인 escape를 사용하도록 하자.
- th:text → th:utext
- [[...]] → [(...)]
SpringEL 표현식
- 스프링이 내부에서 객체를 접근하는 문법으로 타임리프는 이를 그대로 적용한다.
- code
  java
  
  thymeleaf
- 결과
- Object
  - user.username
  - user['username']
  - user.getUsername()
- List
  - users[0].username
  - users[0]['username']
  - users[0].getUsername()
- Map
  - userMap['userA'].username
  - userMap['userA']['username']
  - userMap['userA'].getUsername()
- 지역변수 <div th:with="first=${users[0]}">
  - 예시
    div 태그에 지역변수를 선언했기 때문에 div 범위 안에서만 사용가능하다.
유틸리티 객체와 날짜
- tutorial
  🌞 유틸리티는 이런 게 있다는 정도만 알고, 필요할 때 찾아서 사용하면 된다.
- 날짜 예시 코드
  java
  
  thymeleaf
- 결과
- 그 외 종류
  - #message : 메시지, 국제화 처리
  - #uris : URI 이스케이프 지원
  - #dates : java.util.Date 서식 지원
  - #calendars : java.util.Calendar 서식 지원
  - #temporals : 자바8 날짜 서식 지원
  - #numbers : 숫자 서식 지원
  - #strings : 문자 관련 편의 기능
  - #objects : 객체 관련 기능 제공
  - #bools : boolean 관련 기능 제공
  - #arrays : 배열 관련 기능 제공
  - #lists , #sets , #maps : 컬렉션 관련 기능 제공
  - #ids : 아이디 처리 관련 기능 제공
편의 객체
- 타임리프에서 자주 사용되는 것들을 사용할 수 있게 기본으로 제공해주는 것이다.
- code
  🌞 타임리프가 업데이트가 되면서 model에 담은 session, request 등을 기본 객체로 지원하지 않는다.
  
  session은 무시해주세요
- ${param}
  → param이란 이름으로 바로 사용할 수 있게 해준다.
- ${@helloBean}
  → 해당 함수에 담지 않은 것이어도 빈 객체를 사용해서 함수까지 사용가능하다.
URL 링크 @{경로}

code
결과
아래 설명 참고
단순 URL
@{/hello} → http://localhost:8080/hello
쿼리 파라미터
@{/hello(param1=${param1}, param2=${param2})} → http://localhost:8080/hello?param1=data1&param2=data2
경로 변수(path variable) 사용하기
@{/hello/{param1}(param1=${param1}, param2=${param2})}
→ http://localhost:8080/hello/data1/data2
경로 변수 + 쿼리 파라미터 사용하기
@{/hello/{param1}(param1=${param1}, param2=${param2})}
→ http://localhost:8080/hello/data1?param2=data2

리터럴 Literal
- : 소스 코드상 고정된 값을 말한다.
  → 타임리프 th:text=변수 가 와야하는데 무언가를 적어넣고 싶을 때 사용할 수 있다.
  ※ 타임리프에서 문자 리터럴은 항상 작은 따옴표' 로 감싸야 한다.
- code
- 결과
- 🌞 리터럴 대체 Literal substitutions
  - <span th:text="|hello ${data}|">
  - 이걸 가장 많이 사용할 것 같다. '를 사용하지 않아도 | 만 사용하면 되며 데이터를 사용하기 쉽다.
연산
- 자바와 크게 다르지 않음. HTML엔티티(&gt 등)을 주의.
- code
- Elvis 연산자 : null처리
  - ${nullData}?:실행코드
- No-operation : 데이터가 null일 경우, 타임리프는 아무것도 하지 않는다.
  ${nullData}?: _
속성 값 설정
- <input type="text" name="mock" th:name="userA" />
  → 타임리프는 기존 HTLM의 속성인 name을 mock에서 userA로 치환해버린다.
- code
- 결과
- th:classappend="large" → class="text large"
  - 클래스명 뒤에 한칸 띄고 속성명이 추가된다.
  - th:attrappend와 th:attrprepend는 잘 쓰지 않는다.
- th:checked="true" → 체크박스가 checked상태가 된다.
  - th:checked="false" → checked 속성 자체를 넣지 않는다.
반복
- code
- 화면
- <tr th:each="user : ${users}"> → for문처럼 인덱스에 담긴 데이터를 하나씩 꺼내올 수 있다.
- 타임리프 제공 기능 Stat
  - <tr th:each="user, userStat : ${users}"> → 지정한 변수명 + Stat 으로 생략해도 사용가능하다. th:each="user : ${users}"
  - index : 0부터시작하는 값.
  - count : 1부터 시작하는 값.
  - size : 전체 사이즈.
  - even, odd : 홀수, 짝수 (Boolean).
  - first, last : 처음 마지막 여부 (Boolean).
  - current : 현재 객체.
조건부 평가 if & unless
- code
- 화면
- <span th:text="'미성년자'" th:if="${user.age lt 20}">
  → 자바의 if문과 동일하다.
  lt는 HTML엔티티로 < 이다. 10대이면 <span>태그가 출력된다.
- <span th:text="'미성년자'" th:unless="${user.age ge 20}">
  → unless는 false일 시 실행된다.
  ge는 10 >= 20은 false이므로 실행된다.
- 🌞 th:if와 th:unless는 조건이 맞지 않으면 태그 자체가 출력되지 않는다.
  span태그 갯수가 다르다.
- <td th:switch="${user.age}">
  → java의 switch문과 동일하다.
  당연히 case문과 같이 사용한다.
  
  <span th:case="10">10살</span>
  
  <span th:case="20">20살</span>
  
  <span th:case="*">기타</span>
주석

code
결과
1. HTML주석 
  → 개발자도구에 표기된다.
2. 🌞타임리프 파서 주석  주석처리 됨 
  → 개발자도구에 표기되지 않는다.
  주석 사이의 태그는 렌더링 시 주석처리된다.
3. 타임리프 프로토타입 주석 
  → 주석이지만 렌더링 시 실제 태그로 처리되어 출력된다.
  (잘 사용되지 않음)

블록 <th:block> 타임리프 자체 태그
- code
- 결과
- <div>태그를 블록으로 여러개를 만들었다.
  (웬만하면 안 쓰는 게 좋지만, 필요한 경우가 가끔 있다)
자바스크립트 인라인 <script th:inline="javascript">
- code
- 결과
- 타임리프 인라인 사용전
  - 타임리프 인라인 없이 사용하면 위와 같이 오류가 나기 때문에 이렇게 복잡하게 적어야 한다.
  - 또한 user = BasicController.User()와 같이 데이터를 사용하기 힘들다.
- 타임리프 사용 후
  - [[${user.username}]]; 와 같이 간단히 사용할 수 있다.
  - /*[[${user.username}]]*/ 렌더링 하면서 주석 안의 데이터를 사용하는 내추럴 템플릿으로 사용 가능하다.
  - user 데이터가 json으로 변환해 들어온다.
- for문 사용하기
  - [# th:each="user, stat : ${users}"] [/]
  - 이렇게 for문을 돌리면 json으로 편하게 데이터를 사용할 수 있다.
템플릿 조각 th:fragment & th:replace

code
footer

적용화면
화면
<footer th:fragment="copy"> → 푸터명을 지정할 수 있다.
<div th:insert="~{template/fragment/footer :: copy}"> → <div>태그 안에 <footer>태그를 추가한다.
<div th:replace="~{template/fragment/footer :: copy}"> → <div>태그를 <footer>태그로 바꿔버린다.
footer명을 지정할 때 param을 지정하여 사용할 수 있다.
<footer th:fragment="copyParam (param1, param2)">
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>
부분 포함 단순 표현식
<div th:replace="template/fragment/footer :: copy">
→ ~{...} 를 사용하는 것이 원칙이지만 템플릿 조각을 사용하는 코드가 단순하면 이 부분을 생략할 수 있다.

템플릿 레이아웃 1
- 공통 <head>에 사용하는 css, javascript 같은 정보들이 있는데, 각 페이지마다 정보를 더 추가해서 사용하고 싶을 경우.
- code
  java
- 화면
  1. @GetMapping("layout") → http://localhost:8080/template/layout 으로 가면 layoutMain.html이 열려야 한다.
  2. <head th:replace="template/layout/base :: common_header(~{::title},~{::link})">
    th:replace로 base.html로 교체해버린다.
    이 때 common_header(~{::title},~{::link} 를 사용한다. common_header라는 이름으로 <title>과 <link>를 전달한다.
  3. base.html에서 <headth:fragment="common_header(title,links)">로 전달받은 title과 links를 <th:block th:replace="${links}" /> 로 바꿔서 사용할 수 있다.
템플릿 레이아웃 2
- <html>태그에 타임리프 속성을 만들어 페이지 자체를 교체해 버리는 경우. 중복 페이지가 많을 경우 사용한다.
- 화면
- <html th:fragment="layout (title, content)"
  → <html> 태그에서 데이터를 가져와 layout()이란 이름으로 사용할 수 있게 한다.
- <html th:replace="~{template/layoutExtend/layoutFile :: layout(~{::title},~{::section})}"
  → layoutFile을 가져와 교체하고 layout이란 이름으로 데이터를 가져온다.

※ 참조 : https://www.inflearn.com/roadmaps/373E

저작자표시 비영리 변경금지

'✨ UI > 🖤 View Templates' 카테고리의 다른 글

[Thymeleaf][SpringBoot]스프링이 지원하는 타임리프 기능(입력위주) (1)	2025.03.11
[Thymeleaf] 타임리프란? (0)	2025.03.07
[Thymeleaf]타임리프 사용법 간단정리 (0)	2025.03.03
[JAVA]JSP로 회원관리 웹 애플리케이션 만들기 (0)	2025.02.28
[JSP] jsp란? 기본구성 (0)	2024.12.31

현재글[Thymeleaf]타임리프 기본 기능 사용법 총정리

분류 전체보기 (522)

🍃 Spring (8)

☕ JAVA (129)

🐍 Python (41)

✨ UI (36)

😼 Git (3)

☁ Network (19)

🕸 Algorithm (84)

📜 CleanCode (24)

📑 개발 사전 (44)

🛠 도구 (57)

💾 Data Base (5)

☠ [ERROR] (5)

🏙 취직 & 업무 (5)

♥ Life (20)

❔ (1)

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Nuey.log

[Thymeleaf]타임리프 기본 기능 사용법 총정리

'✨ UI > 🖤 View Templates' 카테고리의 다른 글

'✨ UI/🖤 View Templates'의 다른글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역

[Thymeleaf]타임리프 기본 기능 사용법 총정리

'✨ UI > 🖤 View Templates' 카테고리의 다른 글

'✨ UI/🖤 View Templates'의 다른글

관련글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역