728x90
타임리프는 스프링 부트에서 공식적으로 지원하는 View 템플릿입니다. JSP와 달리 Thymeleaf 문서는 html 확장자를 갖고 있어 JSP처럼 Servlet이 문서를 표현하는 방식이 아니기 때문에 서버 없이도 동작 가능합니다.
2. 타임리프를 적용할 HTML 문서를 작성하고 상단 <html> 태그 내부에 다음과 같이 작성합니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
타임리프 사용법
타임리프에서는 서버에서 받아온 데이터를 ${ } 을 이용하여 표기합니다.
컨트롤러 부분
컨트롤러에서 Model을 통해 'name'이란 이름에 'Rooney'를 넣어 View 부분으로 보냅니다.
@RequestMapping("/article")
public class ArticleController {
@GetMapping("/list")
public String articleList(Model model) {
model.addAttribute("name", "Rooney");
return "article/list";
}
}
View(타임리프) 부분
타임리프 문법 중 글씨를 출력하는 th:text=""에 넘긴 데이터 ${name}을 넣어주면 위에
컨트롤러에서 매핑한 /article/list로 접속했을 때 화면에 Rooney가 출력됩니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:text="${name}"></div>
</body>
</html>타임리프 자주 사용하는 문법
| 문법 | 역할 | 예제 |
| th:text | 문자열 생성 | th:text=" ${data} " |
| th:each | 반복문 | th:each="article : ${articleList}" |
| th:if | if 조건문 | th:if=${data != null} |
| th:href | 이동 경로 | th:href=" @{/article/list(id= ${data} )} " |
타임리프에서 a태그를 작성할 때는 th:href="@{}" 을 이용하여 작성합니다.
<!-- 특정 url로 이동 -->
<a th:href="@{https://developer-rooney.tistory.com}">글 상세보기</a>
<!-- 현재 서버 내에서 이동 -->
<a th:href="@{/board/list}">게시글 리스트</a>
<!-- 파라미터를 넘길 시 -->
<a th:href="@{/board/view(id = ${board.id})}">글 상세보기</a>
<!-- 파라미터를 여러 개 넘길 시 -->
<a th:href="@{/board/view(id = ${board.id}, writer = ${board.writer}})}">글 상세보기</a>
<!-- PathVariable 사용 시 -->
<a th:href="@{/board/view/{id}(id = ${board.id})}">글 상세보기</a>
원본링크 : https://developer-rooney.tistory.com/158?category=496155
[Thymeleaf] 타임리프 사용법 및 문법
타임리프는 스프링 부트에서 공식적으로 지원하는 View 템플릿입니다. JSP와 달리 Thymeleaf 문서는 html 확장자를 갖고 있어 JSP처럼 Servlet이 문서를 표현하는 방식이 아니기 때문에 서버 없이도 동작
developer-rooney.tistory.com
728x90
'STUDY > SpringBoot' 카테고리의 다른 글
| [SpringBoot] 22-08-10 스프링부트 설정 설명 ☑ (0) | 2022.08.10 |
|---|---|
| [Springboot] 게시판따라하기(6) - 게시판 파일업로드 ✔정리 (0) | 2022.08.10 |
| [Springboot] 게시판따라하기(5) - 메세지 띄우기 ✔정리 (0) | 2022.08.09 |
| [Springboot] 게시판따라하기(4) - 게시글 삭제·수정 ✔정리 (0) | 2022.08.09 |
| [Springboot] 게시판따라하기(3) - 게시글 상세페이지 ✔정리 (0) | 2022.08.09 |