[스프링부트] tymeleaf

Kwon·2023년 11월 22일

스프링부트

목록 보기
4/12
post-thumbnail

Tymeleaf

타임리프란

  • 웹 및 웹이 아닌 환경 모두에서 작동할 수 있는 Java XML/HTML/HRML5 템플릿 엔진
  • MVC 기반 웹 애플리케이션 뷰 레이어에서 XHTML/HTML5를 제공하는 데 적합하지만 오프라인 환경에서도 모든 XML 파일을 처리할 수 있음

설정

  • 타임리프 사용을 위해선 설치가 필요.
  • 스프링 부트에선 build.gradle에서 라이브러리 설치 가능

템플릿 사용

  • 템플릿에서 html파일 생성 후 자바 파일 Controller로 html 설정해주면 연동이 가능


question_list.html

<table>
    <thead>
    <tr>
        <th>제목</th>
        <th>작성일시</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="question : ${questionList}">
        <td th:text="${question.subject}"></td>
        <td th:text="${question.createDate}"></td>
    </tr>
    </tbody>
</table>

QuestionController.java

import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.List;

@RequiredArgsConstructor
@Controller
public class QuestionController {

    private final QuestionRepository questionRepository;

    @GetMapping("question/list")
    public String list(Model model) {
        List<Question> questionList = this.questionRepository.findAll();
        model.addAttribute("questionList", questionList);
        return "question_list";
    }
}

자주 사용하는 타임리프 속성

1. 분기문 속성

th:if="${question != null}"

이와 같은 경우 question 객체가 null이 아닌 경우에 해당 엘리먼트가 표시

2. 반복문 속성

  • loop.index : 반복 순서, 0부터 1씩 증가
  • loop.count : 반복 순서, 1부터 1씩 증가
  • loop.size : 반복 객체의 요소 갯수 (예 : questionList의 요소 갯수)
  • loop.first : 루프의 첫 번째 순서인 경우 true
  • loop.last : 루프의 마지막 순서인 경우 true
  • loop.odd : 루프의 홀수번째 순서인 경우 true
  • loop.even : 루프의 짝수번째 순서인 경우 true
  • loop.current : 현재 대입된 객체 (예 : 위의 경우 question과 동일)

3. 텍스트 속성

👉 th:text=값 속성은 해당 엘리먼트의 텍스트로 "값"을 출력.

th:text="${question.subject}"

👉 텍스트는 th:text 속성 대신에 다음처럼 대괄호를 사용하여 값을 직접 출력 가능.

<tr th:each="question : ${questionList}">
    <td>[[${question.subject}]]</td>
    <td>[[${question.createDate}]]</td>
</tr>
profile
📲 @bu_kwon_2 / 💻 dnu05043.log / ⌨ Back-end / 🦁 LikeLion

0개의 댓글