Spring Boot #3 - 스프링 MVC와 Thymeleaf

 Thymeleaf를 사용하는 프로젝트 생성

---

스프링 부트는 설정을 통해서 JSP 등을 사용할 수도 있지만 기본적으로 JSP 대신에 Thymeleaf나 FreeMarker, Mustache 등을 이용해서 화면을 처리한다.

 

여러 기술 중에서 Thymeleaf를 이용하는 이유는 다음과 같다.

• JSP와 유사하게 ${}을 별도의 처리 없이 이용할 수 있다.
• Model에 담긴 객체를 화면에서 JavaScript로 처리하기 편리하다.
• 연산이나 포맷과 관련된 기능을 추가적인 개발 없이 지원한다.
• 개발 도구를 이용할 때 .html 파일로 생성하는데 문제가 없고 별도의 확장자를 이용하지 않는다.

의존성을 위와 같이 추가해서 프로젝트를 생성한다.

 

생성 된 프로젝트 내에 controller 패키지를 생성하고 위와 같이 SampleController를 추가한다.

template 폴더 내에 sample 폴더를 생성하고 ex1.html 파일을 추가한다. 

 

위의 소스 코드를 보면 짐작하겠지만 Thymeleaf의 기본적인 사용 방법은 기존의 속성 앞에 'th:'를 붙여주고 속성값을 지정하는 것이다. JSP와 달리 별도의 태그를 이용하지 않고 HTML을 그대로 유지한 상태에서 필요한 내용을 추가해서 개발할 수 있다. JSP는 별도의 <% %> 등을 이용해서 블록을 설정하는 등 기존의 HTML 구조를 훼손하는 경우가 많았다면 Thymeleaf는 HTML은 그대로 두고 필요한 동작이나 값을 추가하는 방식이다.

 

Thymeleaf의 기본 사용법

---

Thymeleaf는 JSP를 사용해 본적이 있다면 별다른 어려움없이 적응이 가능하다는 장점이 있다.

프로젝트에 dto 패키지를 생성하고 SampleDTO 클래스를 추가한다. SampleController에서는 이를 이용하여 데이터를 전송되도록 작성한다.

 

반복문 처리

Thymeleaf에서의 반복은 th:each 라는 속성을 이용한다. each 속성은 위와 같이 사용한다.

 

 

제어문 처리

 

Thymeleaf의 제어문 처리는 th:if ~ unless 등을 이용할 수 있고, 삼항연산자 스타일을 사용할 수 있다. 예를 들어 'sno의 값이 5의 배수들만 출력하라'는 지시가 있다면 다음과 같은 형태로 사용할 수 있다.

 

Thymeleaf의 th:if를 이용하는 방식이 번거롭다면 삼항연산자 방식을 이용하는 것도 좋다. Thymeleaf는 삼항연산자를 사용할 수 있는데 특이하게도 단순 if와 같이 2개의 항만으로 처리할 수 있다.

 

<ul>
  <li th:each="dto, state : ${list}" th:text="${dto.sno % 5 == 0}?${dto.sno}">
  </li>
</ul>

 

예를 들어 sno가 5로 나눈 나머지가 0인 경우에는 sno만을 출력하고, 나머지는 first를 출력하고 싶다면 다음과 같이 작성할 수 있다.

<ul>
  <li th:each="dto, state : ${list}" th:text="${dto.sno % 5 == 0}?${dto.sno}: ${dto.first}">
  </li>
</ul>

이와 같은 방식을 이용하면 특정한 상황에만 적용하는 CSS의 클래스를 지정하는 등의 작업을 편하게 할 수 있다. sno를 5로 나눈 나머지가 0인 경우에만 특정한 CSS를 적용한다면 다음과 같은 코드를 작성할 수 있다.

이전 예제와 달리 '?'뒤에 하나의 결과만 반영하도록 한 부분이 갖아 큰 차이이다.

 

 

inline 속성

 

Thymeleaf의 여러 속성 중에서 개발에 많이 도움되는 기능이 inline 속성이다. inline 속성은 주로 javaScript 처리에서 유용하다. 예제를 위해 SampleController에 약간의 코드를 추가한다.

추가된 exInline()은 내부적으로 RedirectAttributes를 이용하여 '/ex3'으로 result와 dto라는 이름의 데이터를 심어서 전달한다. ex3.html에서 가장 중요한 부분은 <script> 태그에 사용된 th:inline 속성이다. 속성값이 javascript로 지정되었는데 이로 인해 많은 변화가 생긴다.

별도의 처리가 없음에도 불구하고 문자열은 자동으로 ""이 추가되어 문자열이 되는 것을 볼 수 있고, 같이 전송된 dto는 JSON 포맷의 문자열이 된 것을 볼 수 있다. 만일 위의 코드를 javaScript 객체로 변환해서 사용하고자 한다면 간단히 JSON.parse('\"' + dto + '\"); 와 같은 형태로 ""을 추가해서 사용할 수 있다.