타임리프 스프링 통합

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

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

입력 폼 처리

th:object , th:field 로 폼을 개발할 때 약간의 편리함을 얻을 수 있다.

• th:object : 커맨드 객체를 지정한다.
• *{...} : 선택 변수 식이라고 한다. th:object 에서 선택한 객체에 접근한다.
• th:field
  • HTML 태그의 id , name , value 속성을 자동으로 처리해준다
  • 자동으로 추가해주기 때문에 오타발생시 바로 오류가 출력된다.

form/addForm.html 렌더링 전

<form action="item.html" th:action th:object="${item}" method="post">
    <div>
        <label for="itemName">상품명</label>
        <input type="text" id="itemName" th:field="*{itemName}" class="form-control" placeholder="이름을 입력하세요">
    </div>

렌더링 후

• th:object="${item}" : <form>에서 사용할 객체를 지정한다. 선택 변수 식( *{...}) 사용 가능
• th:field="*{itemName}"
  • *{itemName} : ${item.itemName} 과 같다. <form>에서 th:object="${item}"을 선택했기 때문에 선택 변수 식을 적용 가능
  • th:field : id , name , value 속성을 모두 자동으로 만들어준다.
    • id : th:field 에서 지정한 변수 이름과 같다. id="itemName"
    • name : th:field 에서 지정한 변수 이름과 같다. name="itemName"
    • value : th:field 에서 지정한 변수의 값을 사용한다. value=""

체크박스 - 단일1

주의 - **HTML checkbox**

<!-- single checkbox -->
<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>

실행 로그 확인

FormItemController : item.open=true //체크 박스를 선택하는 경우
FormItemController : item.open=null //체크 박스를 선택하지 않는 경우

• 체크 박스를 체크하면
  • HTML Form에서 open=on 이라는 값이 넘어간다.
  • 스프링은 on 이라는 문자를 true 타입으로 변환해준다
• 체크 박스를 선택하지 않으면
  • HTML에서 체크 박스를 선택하지 않고 폼을 전송하면 open 이라는 필드 자체가 서버로 전송되지 않는다.
  • 서버에서는 open이라는 필드가 false가 아니라, 전송을 하지 않았기 때문에 null상태이다.

체크 해제를 인식하기 위한 히든 필드

<!-- single checkbox -->
<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>

• 히든 필드를 하나 만들어서, _open 처럼 기존 체크 박스 이름 앞에 언더스코어( _ )를 붙여서 전송하면 체크를 해제했다고 인식할 수 있다.
• 히든 필드는 항상 전송되므로 체크를 해제한 경우
  • **open 은 전송되지 않고, `_open` 만 전송된다.** (스프링 MVC는 체크를 해제했다고 판단)

실행 로그 확인

FormItemController : item.open=true //체크 박스를 선택하는 경우
FormItemController : item.open=false //체크 박스를 선택하지 않는 경우

• 체크 박스 체크
  • open=on&_open=on
    • 스프링 MVC가 open 에 값이 있는 것을 확인하고 사용한다.
    • _open 은 무시한다.
• 체크 박스 미체크
  • _open=on
    • 스프링 MVC가 _open 만 있는 것을 확인하고, open 의 값이 체크되지 않았다고 인식한다.
    • 서버에서 Boolean 타입을 찍어보면 결과가 null 이 아니라 false

체크박스 - 단일2

히든 필드를 추가하는 것은 상당히 번거로울 수 있다.

타임리프가 제공하는 th:field 속성을 이용하면 히든 필드와 checked속성까지 자동으로 설정해준다.

히든 필드 자동 추가

addForm.html

<!-- single checkbox -->
        <div>판매 여부</div>
        <div>
            <div class="form-check">
                <input type="checkbox" id="open" th:field="*{open}" class="form-check-input">
<!--                <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>

실행 결과

타임리프가 자동으로 히든필드를 생성한 것을 확인할 수 있다.

checked 자동 설정

item.html

<!-- single checkbox -->
<div>판매 여부</div>
<div>
    <div class="form-check">
        <input type="checkbox" id="open" th:field="${item.open}" class="form-check-input" disabled>
        <!--                <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>

실행 결과

• checked="checked"
  • 타임리프의 th:field 를 사용하면, 값이 true 인 경우 체크를 자동으로 처리해준다.
  • 자동으로 checked 속성이 추가된 것을 확인할 수 있다.

체크박스 - 멀티

@ModelAttribute

• 각각의 컨트롤러에서 model.addAttribute(...) 을 사용해서 체크 박스를 구성하는 데이터를 반복해서 넣어주는 번거러움을 줄일 수 있다.
• @ModelAttribute 는 컨트롤러에 있는 별도의 메서드에 적용할 수 있다.
• 해당 컨트롤러를 요청할 때 regions 에서 반환한 값이 자동으로 모델( model )에 담기게 된다.

FormItemController에 추가

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

@ModelAttribute 을 통해 model.addAttribute("regions", regions);와 같이 regions라는 Map을 model에 담는다.

해당 메서드의 반환값이 자동으로 model에 담긴다.

addFrom.html에 멀티체크박스 추가

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

<!-- 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>

• th:each="region : ${regions}"

  • model에 있는 regions라는 Map을 반복 해준다.

• th:for="${#ids.prev('regions')}”

  • 멀티 체크박스는 같은 이름의 여러 체크박스를 만들 수 있다.
  • 반복해서 HTML 태그를 생성할 때, HTML의 id 가 타임리프에 의해 동적으로 만들진다.
    • **id 는 모두 달라야** 하므로 타임리프는 체크박스를 each 루프 안에서 반복해서 만들 때 임의로 1 , 2 , 3 숫자를 뒤에 붙여준다.
    • ids.prev(...) , ids.next(...) 을 통해 동적으로 생성되는 id 값을 사용할 수 있다.
      • ids.prev(...): ids.prev('regions')→ regions1)
      • ids.next(...): ids.prev('regions')→ 1regions)

실행결과

상품 추가

• th:field ="*{regions}" == th:field ="${item.regions}"
  • 히든필드가 생성되서 null이 넘어가는것을 방지해준다.

상품 상세

• th:field ="${item.regions}"
  • th:value에 들어가는 region.key값과 비교해 값을 포함하면 checked속성이 추가된다.
  • 자동으로 th:value 의 값과 비교해서 checked 여부를 설정해준다.