[Spring Boot | Thymeleaf] 타임리프 사용방법 및 시작하기
요즘 트렌드인 Front-end Framework인 React.js, Next.js, Vue.js, Nuxt.js 등을 사용하지 않고 Spring 기반 프로젝트에서 화면 구현의 기술 및 템플릿 엔진으로 JSP나 Thymleaf를 많이 선택합니다. 전자정부 프레임워크나, SI 프로젝트 등에서는 default로 JSP + Spring Project을 많이 사용하는데 근래 Spring Project의 화면 구현 템플릿 엔진으로는 Thymeleaf를 많이 선택하고 있습니다.
이번 글에서는 템플릿 엔진 Thymeleaf에 대해 알아보겠습니다.
Thymeleaf란?
타임리프(Thymeleaf)에 개념을 확인했습니다. Spring framework 프로젝트에서 MVC 패턴을 사용해 개발을 할 때 V, View 에 해당하는 화면을 구현할 때 사용하는 템플릿 엔진입니다. 개념에 대해서는 알았으니 이제 Spring framework에서 Thymeleaf가 어떻게 사용되는지 알아보도록 하겠습니다.
1. Dependency
타임리프(Thymeleaf)를 사용할 수 있도록 의존성을 설정해주어야 하는데요. 먼저 공식적으로 지원하는 Maven에서 Thymeleaf 의존성을 확인해서 등록해주어야 합니다. 의존성 주입 예시를 작성해놓겠지만, 어느 시점에 작업하는지에 따라서 의존성의 주 인기 있는 버전이 달라질 수 있는데, Maven 공식 레포지토리 사이트에서 의존성을 확인하고 주입해주는 것이 좋은 습관으로 보입니다.
build.gradle
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
testImplementation 'org.springframework.boot:spring-boot-starter-test'
}Thymeleaf를 사용할 수 있도록 thymeleaf 의존성, 라이브러리를 추가합니다.
2. Thymeleaf를 사용하기 위한 기본 경로 확인
프로젝트 디렉터리 구조 내에서 Thymeleaf가 기본으로 사용될 경로인 templates 폴더(즉, root)를 확인합니다.
없다면 생성해주세요.
프로젝트 디렉터리(root) > src > main > resources > templates
templates 폴더와 같은 위치에 있는 static 폴더는 css와 같은 정적 파일을 담는 폴더입니다.
3. Controller.class 생성 및 templates 디렉터리 하위 html 파일 생성
templates 폴더 하위에 있는 html 파일들은 static 폴더 하위의 정적 파일로 접근과 다르게 url을 바로 호출할 수 없습니다.
따라서 Controller 클래스를 생성해야 하고, Controller에서 templates 폴더 하위의 html 폴더에 접근할 수 있도록 세팅해주어야 합니다. 아래 이미지에서는 메인 클래스(SpringBootThymeleafApplication.class)가 있는 패키지 하위로 controller 패키지를 생성하고, 그 하위에 ExamController 클래스를 생성해 두었습니다. 그리고 src/main/resources/templates 폴더 하위에 hello.html 파일을 생성해 두었습니다.
resources/templates 디렉토리 하위의 hello.html 파일로 접근하는 것까지 확인합니다.
url요청을 보면 /hello로 요청하고, 요청받은 Controller는 templates 폴더 하위의 hello.html 파일을 불러와 보여주게 됩니다.
4. 타임리프(Thymeleaf) 옵션 설정하기
타임리프를 사용하면서 여러 옵션을 사용할 수 있습니다. 루트폴더 변경, 타임리프 캐시 설정 변경 등 application.yml 혹은 application.properties 파일에 옵션을 설정할 수 있습니다.
application.yml
# Thymeleaf (1. 루트폴더 변경, 2. 타임리프 캐시 설정 변경)
spring:
thymeleaf:
prefix: classpath:templates/thymeleaf/
check-template-location: true
suffix: .html
mode: HTML
cache: false # default true, 개발 시에는 false로 두는 것이 좋음루트폴더를 변경 및 캐시 설정을 false로 변경합니다.
개발을 할 때에는 캐시 설정을 false로 두어서 캐시 기능을 사용하지 않도록 하여서, 수정 내용이 바로 반영되도록 하여 개발을 편리하게 할 수 있습니다.
루트 폴더를 변경했기 때문에 프로젝트를 다시 시작해서 같은 경로인 /hello로 접속하면 아무것도 뜨지 않습니다.
src/main/resources/templates/thymeleaf 폴더가 Thymeleaf의 루트 디렉터리(root directory)로 세팅되었기 때문에 해당 위치에 html 파일을 넣어줍니다. prefix, suffix를 설정하였으니 Controller에서 반환값도 html 파일 이름만 작성합니다.
/hello로 요청 시 /templates/thymeleaf/ 디렉터리의 hello.html 파일을 보여줍니다.
타임리프 문법(Thymeleaf Syntax)을 보시기 전에 제가 Thymeleaf로 Test Project로 구현한 것이 있는데 소스를 참고하시려면 제 spring-boot-thymeleaf 레포지토리로 방문해주세요. 그리고 Thymeleaf로 게시판을 구현한 프로젝트 소스가 궁금하신 분은 제 spring-boot-board 레포지토리에 와서 구경 해주셔도 좋을 것 같습니다.
틀린 내용이 있으면 코멘트 남겨주세요.
5. 타임리프 문법 (Thymeleaf Syntax)
html 파일에서 Thymeleaf 문법을 사용해 보겠습니다. 가장 먼저 html 파일에서 thymeleaf를 사용한다는 것을 인식시켜 주기 위해 html 파일에서 html 태그에 다음과 같은 속성을 추가합니다.
<html xmlns:th="http://www.thymeleaf.org">
타임리프 문법은 다음과 같은 규칙이 있습니다.
html 태그의 속성에 [th:]라는 접두사가 붙은 속성을 사용해 thymeleaf 문법을 사용할 수 있습니다.
위에서 <h3> 태그의 속성으로 타임리프 문법 <h3 th:text="Test">... </h3>가 쓰였는데, 화면에서 보면 <h3> 태그 내의 문구는 사라지고 Test라는 텍스트로 대체됩니다.
응용하면 데이터를 받아서 변수를 사용해 데이터를 표현하는 등의 처리를 할 수 있습니다.
th:text는 타임리프의 여러 속성 중 하나입니다.
위 사용 방법을 보았듯이 th:text에 입력된 값으로 대체됩니다. 보통은 변수로 값을 받아서 출력할 때 사용합니다. 유의사항으로는 변수 값이 없거나 아무런 값이 지정되지 않으면 에러가 발생합니다. 때에 따라 값의 유무를 체크해서 기본값을 저장하는 것도 상황에 따라 필요할 수 있습니다. th:text에 띄어쓰기가 들어가도 에러가 발생합니다.
6. 타임리프에서 변수 사용하기, 변수에 값 대입하기
타임리프(Thymeleaf)에서 변수에 값을 선언, 할당하고 변수를 호출해서 사용하는 방법을 알아보겠습니다.
위에서 th:text는 텍스트를 출력하거나, 변수를 호출해서 사용한다고 했었습니다. 타임리프에서 값이 있는 변수를 사용하기 전에 해당 화면에서 변수가 세팅되었거나, Controller에서 변수 세팅을 해주어야 합니다.
우선 html 페이지에서 변수를 세팅하고 사용하는 방법을 먼저 알아보겠습니다.
<div th:with="firstValue=${'타임리프'}">
<h3 th:text="${firstValue}"></h3>
</div>변수를 세팅하기 위한 타임리프 속성 : th:with
th:with를 사용해 변수를 선언, firstValue라는 변수의 값 ${'타임리프'}를 갖도록 하고, 변수의 값을 세팅할 때에는 ${... } 표기를 사용합니다. 최종적으로 firstValue라는 변수에는 텍스트 '타임리프'가 세팅됩니다.
타임리프 변수 사용(호출) : th:text="${variable}"
변수를 호출하여 사용할 때에는 ${... } 표기를 사용합니다. firstValue에 할당된 텍스트 값 '타임리프'가 화면에 출력됩니다.
th:with 속성을 사용하면 변수 기능을 사용할 수 있습니다.
값을 직접 입력해서 사용하는 것이 가능하지만,
보통은 Controller에서 넘어온 매개변수의 값이나 객체의 값을 받아서 사용합니다.
th:with를 응용할 수도 있습니다. div 태그 내에 변수를 2개 선언하고 할당할 수 있습니다. firstValue, secondValue가 선언된 곳을 보면 쉼표(,)로 구분을 짓고 2개의 변수를 할당한 것을 확인할 수 있습니다.
th:with에서 유의할 점 또 하나는 th:with 속성이 사용된 <div> 태그로 감싸져 있는 태그 내에서만 해당 타임리프 변수를 사용할 수 있습니다.
7. 타임리프 응용 : 삼항연산자, th-if
다른 프로그램 언어와 같이 삼항연사자를 사용할 수 있고, th:if 속성을 사용해 if 문처럼 사용할 수도 있습니다.
if 동등 조건 반대의 경우도 확인해 보겠습니다.
secondValue의 값이 '변수2'가 아니면 출력하는 것인데,
일치하기 때문에 해당 태그 자체가 생성되지 않은 것을 확인할 수 있습니다.
8. MVC와 타임리프
타임리프는 위에서도 반복적으로 얘기했던 내용으로 Controller에서 변수를 넘겨받아, 즉 데이터를 받아서 사용하는 패턴을 사용합니다.(MVC 패턴에 대한 이해)
Controller에 새로운 메서드를 하나 생성합니다. 기존과 다르게 매개 변수 Model model 이 추가되었습니다.
클래스 상단에 Model 클래스 import 해줍니다.
import org.springframework.ui.Model;
다음으로는 View로 보여줄 html 파일 data-test.html 파일을 생성합니다.
Controller에서 넘겨받은 데이터를 보여줄 코드를 data-test.html 파일에 작성합니다.
Hello <span th:text="${data1}"></span>
출력되는 변수와 함께 문자열을 추가하고 싶은 경우에는
th:text 속성의 값에 더하기(+) 연산자로 문자열을 붙여줄 수도 있습니다.
Hello <span th:text=" 'Welcome to ' + ${data1}"></span>
조회 수에 비해 반응이 없는 글이 되어 조금 속상합니다.
반응이 좀 있으면 Thymeleaf로 게시판 구현하기 글도 써보려고 했는데
반응이 없어서 Thymeleaf에 관한 글을 정리를 해야되는지 고민하고 있습니다.
Thymeleaf는 인기가 없는 걸까요~ㅎㅎ
글 읽어주셔서 감사합니다.
도움이 되셨다면 좋아요, 구독...
'java, spring' 카테고리의 다른 글
| [Spring Boot | Thymeleaf] 타임리프 th:utext="" (0) | 2023.02.08 |
|---|---|
| [Spring Boot | Thymeleaf] Model, ModelAndView와 타임리프(Thymeleaf) (0) | 2023.02.08 |
| [Java] 스트림(Stream), 람다(Lambda), 메서드 참조 Study 1 (0) | 2022.12.31 |
| JAVA 입력받기 BufferedReader, Scanner (console) (0) | 2022.06.22 |
| JPA 맛보기 (0) | 2022.06.10 |