티스토리 뷰

템플릿 엔진

: HTML 상에 데이터를넣어 보여주는 도구

 다만 HTML과 함께 템플릿 엔진을 위한 문법을 살짝 섞어 사용해야 한다.

 

 

템플릿 엔진 개념 잡기

간단한 예시

h1 태그에는 ${이름} 이 text 어트리뷰트로 할당 되어있고, p태그도 비슷하다. 이러한 형태가 템플릿 문법

이렇게 해 두면 서버에서 이름, 나이라는 키로 데이터를 템플릿 엔진에 넘겨주고, 템플릿 엔진은 이를 받아 HTML에 값을 적용한다.

 

서버에서 보내준 데이터의 예시

- 값이 달라지면 그 때마다 화면에 반영하니 동적인 웹 페이지를 만들 수 있게 되는 것이다.

 

그림

 

타임리프 표현식

 

타임리프 문법

표현식 설명 예제
th:text 텍스트 표현 시 사용 th:text=${person.name}
th:each 컬렉션 반복 시 사용 th:each="person:${persons}"
th:if 조건이 true일 때만 표시 th:if="${person.age}>=20"
th:unless 조건이 false일 때만 표시  th:unless="${person.age}>=20"
th:href 이동 경로 th:href="@{/persons(id=${person.id)}"
th:with 변숫값으로 지정 th:with="name=${person.name}"
th:object 선택한 객체로 지정 th:object="${person}"

 

타임리프 의존성 추가하기

build.gradle

dependencies {
	//-- 생략 --
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
}
728x90
반응형
Comments
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
250x250