프로젝트 진행중 가장 복잡하고 어려운 부분이라고 느낀 부분은 컨트롤러와 뷰의 연결 부분이다. 그래서 이 부분에 대해 다시 한번 정리하려고 한다.
Thymeleaf(타임리프)
타임리프는 컨트롤러가 전달받은 데이터를 이용해 동적으로 화면을 만들어주는 역할을 하는 뷰 템플릿 엔진이다.
타임리프는 HTML 문서에서 html 요소에 다음과 같이 작성하면된다.
<html xmlns:th="http://www.thymeleaf.org">타임리프의 특징
- Natural Template
- 서버를 가동하지 않으면 순수 html 파일을 서버를 가동하게 되면 동적으로 변경된 html 파일을 확인 할 수 있다. 물론 서버를 가동하지 않으면 데이터 확인은 불가하나 마크업언어의 위치 등을 확인 할 수 있다.
- SSR(서버 사이드 랜더링)
- 타임리프는 백엔드 서버에서 HTML을 동적으로 렌더링하는 용도로 사용된다.
타임리프의 기본경로는 applciation.yml파일에 다음과 같이 설정한다.
spring:
thymeleaf:
prefix: classpath:templates/
mode: HTML
cache: false컨트롤러와 타임리프 연결
컨트롤러에서 다음과같이 설정하게 된다면
/templates/home/home.html 이 된다.
public class HomeController {
@GetMapping("/home")
public String home() {
return "home/home";
}
}이렇게 실행된후 톰캣을 실행해 /home 이라는 url로 접근하면 home.html 이 웹페이지에 출력된다.
기본 기능
<a th:text="${todolist.content}" th:href="@{/read(id=${todolist.todo_id})}"></a>
th:text=${}
- 컨트롤러에서 전달받은 데이터를 표현한다.
th:href=@{}
- a태그의 href와 동일하다. 위 코드에서의 url은 /read(id=${todolist.todo_id})가 된다. 이때 id라는 파미터에 todolist.todo_id의 값이 전달한다.
<input type="text" th:value="${user.name}" />th:value=${}
- 입력 필드의 값을 설정할 때 사용된다.
위 코드는 user 라는 자바 객체의 name 속성의 값을 설정한다.
공부한 내용을 작성하는 블로그 입니다. 수정할 부분이 있다면 편하게 댓글 작성부탁드립니다!