특징
서버 사이드 HTML 렌더링(SSR)
백엔드 서버에서 HTML을 동적으로 렌더링하는 용도
네츄럴 템플릿
순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용 가능한 특징
>> 웹 브라우저에서 파일을 직ㅈ접 열어도 내용을 확인할 수 있음
>> 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과 확인 가능
스프링 통합 지원
스프링과 자연스럽게 통합되고 스프링의 다양한 기능을 편리하게 지원
기본 기능
타임리프 사용 선언
<html xmlns:th="http://www.thymeleaf.org">
기본 표현식
텍스트 - text, utext
기본적으로 HTML 테그의 속성에 기능을 정의해서 동작
HTML 콘텐츠에 데이터를 출력할 때는 th:text 사용
<span th:text="${data}">
HTML 테그의 속성이 아닌 HTML 콘텐츠 영역 안에서 직접 데이터 출력
[[${data}]]
Escape
HTML 문서는 <, > 같은 특수 문자를 기반으로 정의
>> 뷰 템플릿으로 HTML 화면을 생성할 때 출력 데이터에 특수 문자 사용 주의
웹 브라우저는 <를 HTML 테그의 시작으로 인식
<를 테그의 시작이 아니라 문자로 표현 할 수 있는 방법
>> HTML 엔티티
HTML에 사용하는 특수 문자를 HTML 엔티티로 변경하는 것
>> escape
Unescape
th:utext
[{....)]
실제 서비스를 개발하다 보면 escape를 사용하지 않아 HTML이 정상 렌더링 되지 않는 문제 발생
>> escape을 기본으로 하고 필요할 때만 unescape를 사용
변수 - SpringEL
변수 표현식 : ${...}
>> 여기에 스프링 EL이라는 스프링이 제공하는 표현식 사용 가능
지역 변수 선언
th:with
선언한 테그 안에서만 사용 가능
기본 객체
${#request}, ${#response}, ${#session}, ${#servletContext}, ${#locale}
>> 스프링 부트 3.0 부터는 지원 x, 직접 model에 해당 객체를 추가해서 사용
#request는 HttpServletRequest 객체가 그대로 제공되기 때문에 편리하게 조회하기 위한 편의 객체 제공
HTTP 요청 파라미터 접근 : param
HTTP 세션 접근 : session
스프링 빈 접근 : @
URL 링크
@{...}
쿼리 파라미터
@{/hello(param1=${param1}, param2=${param2})}
>> /hello?param1=data1¶m2=data2
>> ()에 있는 부분은 쿼리 파라미터로 처리
경로 변수
@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}
>> /hello/data1/data2
>> URL 경로상에 변수가 있으면() 부분은 경로 변수 처리
경로 변수 + 쿼리 파라미터
@{/hello/{param1}(param1=${param1}, param2=${param2})}
>> /hello/data1?param2=data2
>> 함께 사용 가능
Literals
리터럴은 소스 코드 상에 고정된 값
>> 문자, 숫자, 불린, null
문자 리터럴 항상 '로 감싸야 함
>> 너무 귀찮음, 공백 없이 쭉 이어지면 하나의 의미있는 토큰으로 인지해서 생략 가능
룰 : A-Z, a-z, 0-9, [], ., -, _
리터럴 대체(Literal Substitutions)
<span th:text="|hello ${data}|">
>> 마치 템플릿 사용하는 것처럼 편리
연산
자바와 크게 다르지 않음, HTML 엔티티 사용 부분만 주의
비교 연산 : HTML 엔티티 부분 주의
>> >(gt), <(lt), >=(ge), <=(le), !(not), ==(eq), !=(neq, ne)
조건식 : 자바와 유사
Elvis 연산자 : 조건식 편의 버전
No-Operation : _인 경우 마치 타임리프가 실행되지 않는 것처럼 동작
>> 잘 사용하면 HTML 내용 그대로 활용 가능
속성 값 설정
타임리프 태그 속성(Attibute)
주로 HTML 태그에 th:* 속성을 지정하는 방식으로 동작
>> 기존 속성 대체, 없으면 새로 만듦.
속성 추가
th:attrappend : 속성 값의 뒤에 값을 추가
th:attrprepend : 속성 값의 앞에 값을 추가
th:classappend : class 속성에 자연스럽게 추가
checked 처리
HTML 에서 checked 속성은 값과 상관없이 속성만 있어도 체크가 됨
>> th:checked는 값이 false인 경우 checked 속성 자체 제거
반복
th:each
<tr th:each="user : ${users}">
>> 반복시 오른쪽 컬렉션(${users})의 값을 하나씩 꺼내 왼쪽 변수에 담아 태그를 반복 실행
>> List뿐 아니라 배열, java.util.Iterable, java.util.Enumeration을 구현한 모든 객체를 반복 가능
>> Map도 사용 가능, 변수에 담기는 값은 Map.Entry
반복 상태 유지
<tr th:each="user, userStat : ${users}">
>> 반복의 두번째 파라미터 설정해서 반복 상태 확인 가능
>> 두번째 파라미터 생략 가능, 자동으로 지정 변수명 + Stat
반복 상태 유지 기능
index : 0부터 시작하는 값
count : 1부터 시작하는 값
size : 전체 사이즈
even, odd : 홀짝 여부(boolean)
first, last : 처음, 마지막 여부(boolean)
current : 현재 객체
조건부 평가
if, unless
>> 해당 조건이 맞지 않으면 태그 자체를 렌더링 x
switch
*은 만족하는 조건이 없을 떄 사용하는 디폴트
주석
표준 HTML 주석
>> 타임리프가 렌더링 하지 않고 남겨둠
타임리프 파서 주석
>> 타임리프의 진짜 주석, 렌더링에서 주석 부분 제거
타임리프 프로토타입 주석
>> HTML 주석에 약간의 구문 더함
>> HTML 파일을 웹 브라우저에서 그대로 열어보면 렌더링 x
>> 타임리프 렌더링을 거치면 정상 렌더링
블록
<th:block> : HTML 태그가 아닌 타임리프의 유일 자체 태그
타임리프 특성상 HTML 태그 안에 속성으로 기능을 정의해서 사용
>> 이렇게 사용하기 애매한 경우 블록 사용
>> <th:block>은 렌더링시 제거됨
템플릿 조각
웹 페이지 개발할 때 공통 영역이 많이 있음
>> 템플릿 조각과 레이아웃 기능 지원
th:fragment
>> 다른 곳에 포함되는 코드 조각
템플릿 레이아웃
코드 조각을 레이아웃에 넘겨서 사용
<head>에 공통으로 사용하는 css, javascript 같은 공통 정보들을 한 곳에 모아두고 각 페이지마다 정보를 더 추가해서 사용 가능
common_header(~{::title},~{::link})
<html> 전체에 적용 가능
출처 : 김영한, 스프링 MVC 2편, 백엔드 웹 개발 활용 기술
'Spring' 카테고리의 다른 글
| MVC / 메시지, 국제화 (0) | 2025.04.09 |
|---|---|
| MVC / Thymeleaf - 스프링 통합과 폼 (0) | 2025.04.08 |
| MVC / 웹 페이지 만들기 (0) | 2025.04.06 |
| MVC / 기본 기능 (0) | 2025.04.04 |
| MVC / 구조 이해 (0) | 2025.04.04 |