(3) Thymeleaf

CJY·2023년 3월 22일
0

스프링

목록 보기
4/14
  1. 타임리프 - 스프링 통합과 폼 - 입력 폼 처리
  2. 타임리프 - 스프링 통합과 폼 - 체크 박스 - 단일1
  3. 타임리프 - 스프링 통합과 폼 - 체크 박스 - 단일2
  4. 타임리프 - 스프링 통합과 폼 - 체크 박스 - 멀티
  5. 타임리프 - 스프링 통합과 폼 - 라디오 버튼
  6. 타임리프 - 스프링 통합과 폼 - 셀렉트 박스

스프링 통합으로 추가되는 기능들

  • 스프링의 SpringEL 문법 통합
  • ${@myBean.doSomething()} 처럼 스프링 빈 호출 지원
  • 편리한 폼 관리를 위한 추가 속성
  • th:object (기능 강화, 폼 커맨드 객체 선택)
  • th:field , th:errors , th:errorclass
  • 폼 컴포넌트 기능
    - checkbox, radio button, List 등을 편리하게 사용할 수 있는 기능 지원

타임리프 템플릿 엔진을 스프링 빈에 등록하고, 타임리프용 뷰 리졸버를 스프링 빈으로 등록하는 방법
https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html#the-springstandarddialect
https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html#views-and-viewresolver

스프링 부트는 이런 부분을 모두 자동화 해준다. build.gradle 에 다음 한줄을 넣어주면 Gradle은 타임리프와 관련된 라이브러리를 다운로드 받고, 스프링 부트는 앞서 설명한 타임리프와 관련된 설정용 스프링 빈을 자동으로 등록해준다.

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

타임리프 관련 설정을 변경하고 싶으면 다음을 참고해서 application.properties 에 추가하면 된다.

스프링 부트가 제공하는 타임리프 설정, thymeleaf 검색 필요
https://docs.spring.io/spring-boot/docs/current/reference/html/appendix-applicationproperties.html#common-application-properties-templatin

입력 폼 처리

HTMl에서 사용하는 폼 코드에서 타임리프가 지원하는 기능을 사용하면 효율적인 코딩을 할 수 있다.

  • th:object를 통해 커멘드 객체를 지정한다.
  • *{...}는 선택 변수 식이라고 한다. th:object에서 지정한 객체에 접근할 수 있다.
  • th:field 이번 내용에서 핵심이라고 할 수 있다.
    • HTML 태그의 id, name, value속성을 자동으로 처리해준다.
    • checkbox에서 hidden태그를 추가해준다. (나중에 보자.)

예를 들어,
폼 태그에서 폼 태그 안에 th:object로 객체를 item으로 지정하고

<form action="item.html" th:action th:object="${item}" method="post">

폼안에서 작성하는 태그에

렌더링 전

<input type="text" th:field="*{itemName}" />

렌더링 후

<input type="text" id="itemName" name="itemName" th:value="*{itemName}" />

th:value에 넣어준 값을 통해 렌더링 후에 id, name, value가 자동 설정된다.
넣어준 값은 *{itemName}인데 폼 태그에서 item을 객체로 설정했으니 ${item.itemName}과 같은 기능을 하게된다.

체크 박스 - 단일 1

타임리프에서 지원하는 기능을 알아보기 전에 HTML에서의 체크 박스에 대해 좀 알아보자.

<div>판매 여부</div>
<div>
 <div class="form-check">
 	<input type="checkbox" id="open" name="open" class="form-check-input">
 	<label for="open" class="form-check-label">판매 오픈</label>
 </div>
</div>

다음과 같이 만들고 post를 통해 데이터를 받을 때 체크박스가 체크 돼있다면 true로 받지만, 사용자가 체크하지 않는다면 false가 아닌 null값을 받게 된다.

애초에 HTML form에서 체크를 하면 open=on이라는 값을 넣지만, 체크를 안하면 open이라는 필드 자체가 넘어오지 않는다.

이런 문제를 해결하기 위해서 스프링 MVC는 약간의 트릭을 사용하는데, 히든 필드를 하나 만들어서, _open 처럼 기존 체크 박스 이름 앞에 언더스코어( _ )를 붙여서 전송하면 체크를 해제했다고 인식할 수 있다. 히든 필드는 항상 전송된다. 따라서 체크를 해제한 경우 여기에서 open 은 전송되지 않고, _open 만 전송되는데, 이 경우 스프링 MVC는 체크를 해제했다고 판단한다.

<div>판매 여부</div>
<div>
 <div class="form-check">
 	<input type="checkbox" id="open" name="open" class="form-check-input">
 	<input type="hidden" name="_open" value="on"/> <!-- 히든 필드 추가 -->
 	<label for="open" class="form-check-label">판매 오픈</label>
 </div>
</div>

체크 박스 - 단일2

타임리프의 th:field를 사용하면 위와 같은 번거로운 작업을 피할 수 있다.

<!-- single checkbox -->
<div>판매 여부</div>
<div>
 <div class="form-check">
 	<input type="checkbox" id="open" th:field="*{open}" class="form-checkinput">
 	<label for="open" class="form-check-label">판매 오픈</label>
 </div>
</div>

이렇게 th:field를 넣어주면 렌더링 된 결과는 아래와 같아진다.

<!-- single checkbox -->
<div>판매 여부</div>
<div>
 <div class="form-check">
 	<input type="checkbox" id="open" class="form-check-input" name="open" value="true">
 	<input type="hidden" name="_open" value="on"/>
 	<label for="open" class="form-check-label">판매 오픈</label>
 </div>
</div>

타임리프의 체크 확인
checked="checked"
체크 박스를 체크해서 저장하면, 조회시에 checked 속성이 추가된 것을 확인할 수 있다. 이런 부분을 개발자가 직접 처리하려면 상당히 번거롭다. 타임리프의 th:field 를 사용하면, 값이 true인 경우 체크를 자동으로 처리해준다.

체크박스 - 멀티

번외로 @ModelAttribute기능에 대해 알아보자.
현재 상황이 하나의 컨트롤러에서 뷰 모델에 값들을 넣어줘야 한다. 근데 이 넣어주는 코드를 한 곳에서 하는 것이 아니라 여러 곳이다. 즉 model.addAttribute()를 여러 함수에서 작업을 한다, 그것도 똑같은 코드로.

@ModelAttribute("regions")
public Map<String, String> regions() {
	Map<String, String> regions = new LinkedHashMap<>();
	regions.put("SEOUL", "서울");
 	regions.put("BUSAN", "부산");
 	regions.put("JEJU", "제주");
 	return regions;
}

이렇게 컨트롤러안에 별도의 메서드를 선언해주면 해당 컨트롤러를 지나는 뷰에는 항상 "regions"라는 모델에 서울, 부산, 제주가 담겨있다.
참고로, 컨트롤러가 호출될 떄마다 링크드해시맵이 만들어지므로 어딘가에 static으로 선언해서 불러오는 식이면 성능이 개선될 것 같다.

<!-- multi checkbox -->
<div>
 <div>등록 지역</div>
 <div th:each="region : ${regions}" class="form-check form-check-inline">
 	<input type="checkbox" th:field="*{regions}" th:value="${region.key}" class="form-check-input">
 	<label th:for="${#ids.prev('regions')}" th:text="${region.value}" class="form-check-label">서울</label>
 </div>
</div>

참고로 현재 form에는 th:object=${item}이 선언돼있다.
여기서 th:each에서 ${regions}는 아까 위에서 @ModelAttribute로 넣어준 Map이고, 그 안에 input 태그에 있는 *{regions}는 객체의 필드를 의미한다.

label 태그에 있는 th:for="${#ids.prev('regions')}"
멀티 체크박스는 같은 이름의 여러 체크박스를 만들 수 있다. 그런데 문제는 이렇게 반복해서 HTML 태그를 생성할 때, 생성된 HTML 태그 속성에서 name 은 같아도 되지만, id 는 모두 달라야 한다. 따라서 타임리프는 th:field에 의해 체크박스를 each 루프 안에서 반복해서 만들 때 임의로 id뒤에 1 , 2 , 3 숫자를 뒤에 붙여준다.

each로 체크박스가 반복 생성된 결과 - id 뒤에 숫자가 추가
<input type="checkbox" value="SEOUL" class="form-check-input" id="regions1" name="regions">
<input type="checkbox" value="BUSAN" class="form-check-input" id="regions2" name="regions">
<input type="checkbox" value="JEJU" class="form-check-input" id="regions3" name="regions">

HTML의 id 가 타임리프에 의해 동적으로 만들어지기 때문에 <label for="id 값"> 으로 label 의 대상이 되는 id 값을 임의로 지정하는 것은 곤란하다. 타임리프는 ids.prev(...) , ids.next(...) 을 제공해서 동적으로 생성되는 id 값을 사용할 수 있도록 한다.

라디오 버튼

앞의 체크박스와 크게 다른 내용은 없고 차이점은 별도의 히든 필드를 th:field가 만들어주지 않는다. 왜냐하면 라디오 버튼은 수정 과정에서 이전에 체크한 내용이 있다면 아무것도 체크하지 않을 수는 없기 때문이다.

셀렉트 박스

@ModelAttribute("deliveryCodes")
public List<DeliveryCode> deliveryCodes() {
 List<DeliveryCode> deliveryCodes = new ArrayList<>();
 deliveryCodes.add(new DeliveryCode("FAST", "빠른 배송"));
 deliveryCodes.add(new DeliveryCode("NORMAL", "일반 배송"));
 deliveryCodes.add(new DeliveryCode("SLOW", "느린 배송"));
 return deliveryCodes;
}

자바 객체를 통해 모델에 추가하고

<!-- SELECT -->
<div>
 <div>배송 방식</div>
 <select th:field="*{deliveryCode}" class="form-select">
	<option value="">==배송 방식 선택==</option>
 	<option th:each="deliveryCode : ${deliveryCodes}" th:value="${deliveryCode.code}" th:text="${deliveryCode.displayName}">FAST</option>
 </select>
</div>

위에서와 크게 다른 내용은 없다.

타임리프로 생성된 HTML
<!-- SELECT -->
<div>
 <DIV>배송 방식</DIV>
 <select class="form-select" id="deliveryCode" name="deliveryCode">
 	<option value="">==배송 방식 선택==</option>
 	<option value="FAST">빠른 배송</option>
 	<option value="NORMAL">일반 배송</option>
 	<option value="SLOW">느린 배송</option>
 </select>
</div>
선택 후 HTML
<!-- SELECT -->
<div>
 <DIV>배송 방식</DIV>
 <select class="form-select" id="deliveryCode" name="deliveryCode">
    <option value="">==배송 방식 선택==</option>
 	<option value="FAST" selected="selected">빠른 배송</option>
 	<option value="NORMAL">일반 배송</option>
 	<option value="SLOW">느린 배송</option>
 </select>
</div>

selected="selected"
빠른 배송을 선택한 예시인데, 선택된 샐랙트 박스가 유지되는 것을 확인할 수 있다.

어떻게?
th:field에 저장된 값과 th:value를 비교해서 같은 값을 갖고 있으면 selected 속성을 부여해주는 것이다.

정리

기존 HTML에서 타임리프의 유용한 기능들에 대해 알아봤다. th:field는 한번 사용하면 빠져나오기 힘들 정도로 매력적인 기능들을 제공해준다.

profile
CJY
열심히 성장 중인 백엔드
이전 포스트

(3) Thymeleaf

다음 포스트

메시지, 국제화

0개의 댓글