[묘공단-스프링부트3-7장] 타임리프로 뷰 만들기

태초에는 JSP로 스프링의 뷰단을 만들었던 거 같다.
그런데 지금은 스프링에서 타임리프 사용을 권장한다고 한다.
타임리프, 어떻게 쓰는 걸까?

공식 홈페이지를 가 보았다.
https://www.thymeleaf.org/documentation.html
DOC을 봤는데 부가적으로 알아야 하는 내용이 너무 많다.
내가 생각했을 땐 이 정도 글만 봐도 당장은 괜찮을 거 같다.
Spring MVC and Thymeleaf: how to access data from templates
https://www.thymeleaf.org/doc/articles/springmvcaccessdata.html

책에서는 타임리프 표현식을 4개 소개한다.
${...} 이건 변수의 값을 표현하는 식이라는데... 실제로는 th:text=${person.name} 이런 식으로 쓰인다.
person 객체의 name 변수가 text 타입이니까.

#{...} 속성 파일 값 표현식
이건 책에서 th:text="${#temporals.format(today, 'yyyy-MM-dd')}" 이런 식으로 쓰였다.
속성 파일 값 표현식은 좀 다양하게 사용되는 거 같다.
책에서는 #temporals.format 함수를 사용해 날짜 및 시간 값을 원하는 형식으로 포맷팅하는 용도로 사용되었지만
다국어 지원 및 메시지 리소스에 주로 사용된다고 한다.

메시지 리소스 파일에

greeting.message=Hello, World!

이렇게 정의된 메시지가 있으면

<p th:text="#{greeting.message}"></p>

이렇게 사용되는 식이다.
#{...} 표현식을 사용하면 메시지 리소스에 매개변수를 전달할 수도 있다.

@{...} 이건 URL 표현식이다.
th:href="@{/articles/{id}(id=${item.id})}" 이런 식으로 쓰인다.
얘는 이해하기 쉽다.

*{...} 선택한 변수의 표현식이라는 얘는 뭘까?

코드를 보자.

<div th:object="${person}"> <!-- person을 선택한 객체로 지정 -->
    <p th:text="|이름 : *{name}|"></p>
    <ul th:each="hobby : *{hobbies}"> <!-- hobbies 개수만큼 반복 -->
        <li th:text="${hobby}"></li>
        <!-- 반복 대상이 운동이라면 '대표 취미'라는 표시 추가 -->
        <span th:if="${hobby == '운동'}">(대표 취미)</span>
    </ul>
</div>

th:object="${person}" 이러면 person이라는 객체에 접근할 수 있다.

*{...}는 th:object에서 선택한 객체에 접근한다.

그래서 name, hobbies 같은 field에 접근 가능하다.

타임리프를 처음 봤을 땐 헷갈렸는데 블로그에 정리를 하니 한결 이해가 쉽다.
이래서 블로깅이 도움이 된다!

뷰 구현하기는 조금 복잡한데...
방법을 간단하게 정리하자면
1. 우선 DTO를 만든다.
2. 컨트롤러를 만든다.
3. 타임리프 등을 사용해 HTML 뷰를 만든다.
4. 테스트한다.

끝이다!

이 글은 골든래빗 《스프링 부트 3 백엔드 개발자 되기 - 자바 편》의 7장 써머리입니다.