스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - sec02
출처 : 스프링 MVC 2편
타임리프와 스프링
타임리프는 스프링 없이도 동작하지만, 스프링과 통합을 위한 다양한 기능을 편리하게 제공
스프링 통합으로 추가되는 기능들
- 스프링의 SpringEL 문법 통합
${@myBean.doSomething()}처럼 스프링 빈 호출 지원- 편리한 폼 관리를 위한 추가 속성
th:object(기능 강화, 폼 커맨드 객체 선택)- th:field , th:errors , th:errorclass
- 폼 컴포넌트 기능
- checkbox, radio button, List 등을 편리하게 사용할 수 있는 기능 지원
- 스프링의 메시지, 국제화 기능의 편리한 통합
- 스프링의 검증, 오류 처리 통합
- 스프링의 변환 서비스 통합(ConversionService)
스프링부트는 타임리프 템플릿 엔진을 모두 자동화해서 집어 넣어줌
새로 배운 기능들
th:object
커맨드 객체를 지정
*{...}
선택 변수 식, th:object 에서 선택한 객체에 접근
+) 원래 변수 사용 방식은 th:object="${item}" 하지만,
즉, *{itemName} == ${item.itemName}
th:field
HTML 태그의 id , name , value 속성을 자동 처리
name, id : th:field 에서 지정한 변수 이름과 동일
=> id를 삭제해도 th:field가 자동으로 만들어 줌
value : th:field 에서 지정한 변수의 값과 동일
체크 박스
체크 박스를 체크하면 HTML Form에서 open=on 이라는 값이 넘어감 스프링은 on 이라는 문자를 true 타입으로 변환해줌
🚨 HTML에서 체크 박스를 선택하지 않고 폼을 전송하면 open 이라는 필드 자체가 서버로 전송되지 않음
히든 필드 (체크박스의 해결 방법)
<input type="hidden" name="_open" value="on"/>
_open 처럼 기존 체크 박스 이름 앞에 언더스코어( _ )를 붙여서 전송하면 체크를 해제했다고 인식할 수 있음 & 히든 필드는 항상 전송됨 => 체크를 해제한 경우 여기에서 open 은 전송되지 않고, _open 만 전송되는데, 이 경우 스프링 MVC는 체크를 해제했다고 판단함
타임리프식 히든 필드 해결 방법
<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>타임리프를 사용하면 체크 박스의 히든 필드와 관련된 부분도 함께 해결해 줌 -> 자동 생성
타임리프식 체크 확인
checked="checked" 타임리프의 th:field 를 사용하면, 체크 박스에서 판매 여부를 선택해서 저장했을 경우, 값이 true인 경우 체크를 자동으로 처리해줌
disabled
체크 박스가 한 번 선택된 후, 상품 상세 페이지에서는 체크 박스가 선택되지 않도록 설정 (즉, 얘가 있으면 수정이 불가능함)
@ModelAttribute
만약에, 많은 페이지들이 동일한 데이터를 반복해야할 경우, 각각의 컨트롤러에서 model.addAttribute(...) 을 사용해서 체크 박스를 구성하는 데이터를 반복해서 넣어주어야 함 BUT! 이 친구는 이렇게 컨트롤러에 있는 별도의 메서드에 적용할 수 있음! 이렇게하면 해당 컨트롤러를 요청할 때 regions 에서 반환한 값이 자동으로 모델( model )에 담기게 되어 중복되는 부분들을 줄일 수 있음
@ModelAttribute의 사용 방법
th:for="${#ids.prev('regions')}"
멀티 체크박스는 같은 이름의 여러 체크박스를 만들 수 있다. 그런데 문제는 이렇게 반복해서 HTML 태그를 생성할 때, 생성된 HTML 태그 속성에서 name 은 같아도 되지만, id 는 모두 달라야 한다. 따라서 타임리프는 체크박스를 each 루프 안에서 반복해서 만들 때 임의로 숫자를 붙여줌
타임리프는 ids.prev(...) , ids.next(...) 을 제공해서 동적으로 생성되는 id 값을 사용할 수 있도록 함
${T(...).values()}
${T(hello.itemservice.domain.item.ItemType).values()} 스프링EL 문법으로, ENUM을 직접 사용 가능
ENUM에 values() 를 호출하면 해당 ENUM의 모든 정보가 배열로 반환
이렇게 사용하면 ENUM의 패키지 위치가 변경되거나 할때 컴파일러가 타임리프까지 컴파일 오류를 잡을 수 없으므로 추천❌
