📌 Spring Boot - Thymeleaf 사용 정리

My Pale Blue Dot·2025년 5월 9일

Spring Spring boot Thymeleaf

SPRING BOOT

목록 보기

11/40

📅 날짜

2025-05-09

📝 학습 내용

1️⃣ Thymeleaf란?

✅ 정의

Thymeleaf는 HTML/XML 문법을 기반으로 하는 서버 사이드 템플릿 엔진입니다. Spring Boot와의 연동성이 뛰어나 View Layer 구성에 많이 사용됩니다.

✅ 특징 요약

HTML 파일 그대로 브라우저에서 확인 가능 (HTML 친화적 문법)
Spring MVC의 Model 객체와 쉽게 연결
조건문, 반복문, 링크 생성, 자바스크립트 변수 바인딩 등 다양한 표현식 지원
@ModelAttribute와 함께 파라미터를 객체로 쉽게 전달 가능

2️⃣ Gradle 의존성 설정

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

3️⃣ application.yml 설정 (JSP 혼용 포함)

spring:
  thymeleaf:
    prefix: classpath:/templates/
    view-names: th/*       # th/로 시작하는 view는 thymeleaf로 처리
    suffix: .html
    mode: HTML5
    cache: false

  mvc:
    view:
      prefix: /WEB-INF/views/
      suffix: .jsp         # JSP 혼용 시 설정

✅ ViewResolver 우선순위를 명확히 설정해 충돌 방지

4️⃣ HTML 템플릿 예제 (`test1.html`)

<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 기본 데이터 출력 -->
    NAME : <span th:text="${name}"></span>  <hr/>
    MEMO : <span th:text="${memo}"></span>  <hr/>
    MEMO.ID : <span th:text="${memo.id}"></span>  <hr/>
    MEMO.TEXT : <span th:text="${memo.text}"></span>  <hr/>
    MEMO.WRITER : <span th:text="${memo.writer}"></span>  <hr/>

    <!-- 조건문 처리 -->
    <th:block th:if="${isAuth}">
        <div>로그인 상태입니다</div>
    </th:block>
    <th:block th:unless="${isAuth}">
        <div>로그아웃 상태입니다</div>
    </th:block>

    <hr/>

    <!-- 반복문 처리 -->
    <th:block>
        <div th:each="memo : ${memoList}">
            <span th:text="${memo.id}"></span> :
            <span th:text="${memo.text}"></span>
        </div>
    </th:block>

    <hr/>

    <!-- 파라미터 전달 방식 -->
    <a th:href="@{/th/param1(id=${memo.id},text='aaa',writer='bbb')}">이동하기</a> |
    <a th:href="@{/th/param2/{id}/{text}/{writer}(id=${memo.id},text='aaa',writer='bbb')}">이동하기2</a>

    <!-- JavaScript 변수 바인딩 -->
    <script th:inline="javascript">
        const name = [[ ${name} ]];
        const memo = [[ ${memo} ]];
        const memoList = [[ ${memoList} ]];
        console.log('name', name);
        console.log('memo', memo);
        console.log('memoList', memoList);
    </script>
</body>
</html>

✅ 설명

th:text: 모델 값 출력
th:if, th:unless: 조건 분기 처리
th:each: 반복문
th:href: URL 파라미터 바인딩
th:inline="javascript": JS 내에 서버 데이터 주입 가능

5️⃣ Controller 예제 (`ThymeleafTestController.java`)

@Controller
@Slf4j
@RequestMapping("/th")
public class ThymeleafTestController {

    @Autowired
    private MemoRepository memoRepository;

    @GetMapping("/test1")
    public void test1(Model model){
        log.info("GET /th/test1....");

        // 문자열 값 전달
        model.addAttribute("name", "hong");

        // DTO 객체 생성 및 주입
        MemoDto memo = new MemoDto();
        memo.setId(111);
        memo.setText("aaa");
        memo.setWriter("aaa@naver.com");
        model.addAttribute("memo", memo);

        // 로그인 여부 값
        model.addAttribute("isAuth", false);

        // 전체 메모 리스트 전달
        List<Memo> memoList = memoRepository.findAll();
        model.addAttribute("memoList", memoList);
    }

    // 쿼리스트링 파라미터 자동 바인딩
    @GetMapping("/param1")
    public void param1(@ModelAttribute MemoDto memoDto){
        log.info("GET /th/param1..." + memoDto);
    }

    // PathVariable 바인딩도 @ModelAttribute로 수집 가능
    @GetMapping("/param2/{id}/{text}/{writer}")
    public void param2(@ModelAttribute MemoDto memoDto){
        log.info("GET /th/param2..." + memoDto);
    }

    // 단순 페이지 이동
    @GetMapping("/test2")
    public void test2(){
        log.info("GET /th/test2...");
    }
}

✅ 설명

Model 객체로 HTML에 데이터 전달
@ModelAttribute로 파라미터 자동 매핑
void 리턴 시 요청 경로와 동일한 템플릿(.html) 자동 호출됨

🔥 정리

Thymeleaf는 Spring Boot에서 HTML 템플릿 렌더링에 최적화된 엔진
ViewResolver를 나눠서 JSP와 혼용 가능
Controller → Model → View 구조를 통해 데이터 흐름을 자연스럽게 관리
조건문, 반복문, 링크, JS 연동까지 확장성 매우 뛰어남

🔗 참고 자료

My Pale Blue Dot

Here, My Pale Blue.🌏

이전 포스트

📌 Spring Boot - RestController 활용

다음 포스트

📌 Spring Boot - Thymeleaf 사용 정리

SPRING BOOT

📅 날짜

📝 학습 내용

1️⃣ Thymeleaf란?

✅ 정의

✅ 특징 요약

2️⃣ Gradle 의존성 설정

3️⃣ application.yml 설정 (JSP 혼용 포함)

4️⃣ HTML 템플릿 예제 (`test1.html`)

✅ 설명

5️⃣ Controller 예제 (`ThymeleafTestController.java`)

✅ 설명

🔥 정리

🔗 참고 자료

📌 Spring Boot - RestController 활용

📌 SpringBoot + 기상청 초단기실황 API 연동 (RestTemplate + Thymeleaf)

0개의 댓글

📌 Spring Boot - Thymeleaf 사용 정리

SPRING BOOT

📅 날짜

📝 학습 내용

1️⃣ Thymeleaf란?

✅ 정의

✅ 특징 요약

2️⃣ Gradle 의존성 설정

3️⃣ application.yml 설정 (JSP 혼용 포함)

4️⃣ HTML 템플릿 예제 (test1.html)

✅ 설명

5️⃣ Controller 예제 (ThymeleafTestController.java)

✅ 설명

🔥 정리

🔗 참고 자료

📌 Spring Boot - RestController 활용

📌 SpringBoot + 기상청 초단기실황 API 연동 (RestTemplate + Thymeleaf)

0개의 댓글

4️⃣ HTML 템플릿 예제 (`test1.html`)

5️⃣ Controller 예제 (`ThymeleafTestController.java`)