[Spring Boot] Thymeleaf (타임리프)

웹에서는 기본적인 HTML을 사용하여 페이지 구조를 설정합니다.

Spring에서는 jsp를 구현할 때 기본적인 HTML 뿐만 아니라 타임리프라는 문법을 제공합니다.

Spring 만의 독립적인 페이지 구조 구축 문법이라고 볼 수 있습니다.

대부분의 사용법과 구성은 기존의 일반적인 HTML과 동일하다고 볼 수 있습니다만 살짝씩 다릅니다.

 

타임리프는 흔히 View Template(뷰 템플릿)이라고 부릅니다.

뷰 템플릿은 컨트롤러가 전달하는 데이터를 이용하여 동적으로 화면을 구성할 수 있게 해줍니다.

타임리프는 html태그를 기반으로하여 th:속성을 이용하여 동적인 View를 제공합니다.

웹에서 가장 기본이되는 HTML로 진입장벽이 낮고 쉽게 배울 수 있다는 장점이 있습니다.

 

 

타임리프 설정

타임리프를 사용하기 위해서는 관련 dependency를 import 시켜주어야 합니다.

 

maven 환경

<!-- thymeleaf -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

 

gradle 환경

<!-- thymeleaf -->
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

 

 

타임리프 사용법

이제 타임리프를 사용하기 위한 dependency 까지 반영하였으니 간단하게 사용하는 방법에 대해서 알아보겠습니다.

타임리프에 관한 문법들이 여러 개 존재하는데 이 문법들에 대해서는 이후에 좀 더 개별적으로 정리해보도록 하겠습니다.

 

타임리프를 사용한다는 것은 한 프로젝트에 view (jsp)까지 같이 운영하고 있다는 의미로도 볼 수 있습니다.

따라서 MVC 패턴으로 운영됩니다.

 

MVC 패턴

- Model : 요청 데이터를 저장하거나 응답 데이터를 보내기 위해 사용하는 저장 객체 (모델)

- View : 노출되는 화면, 클라이언트가 직접적으로 접근하여 요청을 보내고 서비스를 이용하는 페이지

- Controller : Model 과 View 를 연결시켜주는 징검다리 역할을 하며 클라이언트가 view에서 요청하면 Controller를 통해 서비스를 수행하고 model에 저장하거나 응답 데이터를 반환시켜준다.

 

 

View

<form th:action="@{/test}" th:method="post"
      enctype="multipart/form-data">
      
   <!-- Controller 넘길 input 태그들의 코드 -->

</form>

view 쪽 html 코드입니다.

form태그 안에 th 키워드를 붙인 action 속성을 통해 controller의 api url과 매핑합니다.

method 부분도 th 키워드가 붙으며, post 형식으로 요청을 보내게 됩니다.

 

form 태그 내부에 작성한 input 태그들의 데이터들을 controller의 /test 라는 api url로 매핑시켜 post 방식으로 데이터를 전달합니다.

 

 

Controller

@PostMapping("/test")
public RedirectView updateProductDetail(
        HttpServletRequest request,
        @ModelAttribute("postRequest") PostRequestDto postRequestDto) throws IOException {
    log.info("api 진입 - {}", postRequestDto);
    
    String page = "";
    
    // view 에서 전달한 요청 데이터를 가지고 service 단에서 서비스 로직 수행
    // 서비스 로직이 정상 수행되면 success 메세지, 아니면 error 메세지 발행
    if(testService.postData(request, postRequestDto)){
       log.info("[SUCCESS] 정상 처리 되었습니다.");
       page = "/success";
       
    else{
       log.info("[ERROR] 오류가 발생하였습니다.");
       page = "/error";
       
    }
   
    return new RedirectView(page);
}

매핑될 controller를 구성해줍니다.

url은 /test 일 것이며, method 또한 post 방식일 것입니다.

또한 api로 전달될 때 input 태그를 통해 전달될 데이터 내용이 json 형식으로 PostRequestDto 객체에 매핑되어 들어옵니다.

이 때 반드시 view단의 각 input 태그들의 name 속성과 PostRequestDto 객체 안에 있는 필드 속성명과 일치하게 해야 합니다.

 

전달된 데이터들을 service 로 넘겨 정상적으로 로직이 수행되면 success 메세지와 함께 /success 라는 url을 가진 api에 매핑되게 하여 성공 페이지로 이동하게 합니다.

정상적으로 로직이 수행되지 않으면 error 메세지와 함께 /error 라는 url을 가진 api에 매핑되게 하여 오류 페이지로 이동하게 했습니다.

 

 

Model

@NoArgsConstructor
@AllArgsConstructor
@Getter
@Setter
@Builder
@Entity
public class PostTestData extends TimeStamped {

    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Id
    private Long dataId; 

    @Column(nullable = false)
    private String dataName; 

    @Column(nullable = false)
    private String dataDescript;

    @Column(nullable = false)
    private String dataType;
}

model은 말 그대로 데이터를 저장하는 엔티티와 같은 객체들을 말합니다.

api를 통해 service 단에서 로직을 수행하여 model(entity)에 저장되게끔 만들었습니다.

이 PostTestData에 데이터가 저장되고 view로 controller를 통해 반환되는 것입니다.

 

 

이렇게 해서 간단하게 타임리프가 무엇인지 알아보고 사용하는 방법에 대해서 맛보기로 알아보았습니다.

이후에 타임리프 사용 문법들에 대해서 제가 사용한 경험을 토대로 정리해보도록 하겠습니다.