728x90
타임리프는 렌더링 시에 컨버터를 적용해서 렌더링 하는 방법을 편리하게 지원한다
이전까지는 문자를 객체로 변환했다면, 이번에는 그 반대로 객체를 문자로 변환하는 작업을 확인할 수 있다.
ConverterController
@GetMapping("/converter-view")
public String converterView(Model model){
model.addAttribute("number", 10000);
model.addAttribute("ipPort", new IpPort("127.0.0.1", 8080));
return "converter-view";
}- model에 숫자 10000, IPPort 객체를 넣어서 뷰 탬플릿에 전달
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>${number}: <span th:text="${number}" ></span></li>
<li>${{number}}: <span th:text="${{number}}" ></span></li>
<li>${ipPort}: <span th:text="${ipPort}" ></span></li>
<li>${{ipPort}}: <span th:text="${{ipPort}}" ></span></li>
</ul>
</body>
</html>- 타임리프는 ${{...}} 를 사용하면 자동으로 컨버전 서비스를 사용해서 변환된 결과를 출력해준다. 물론 스프링과 통합되어서 스프링이 제공하는 컨버전 서비스를 사용하므로, 우리가 등록한 컨버터들을 사용할 수 있다
- 변수 표현식 : ${...}
- 컨버전 서비스 적용 : ${{...}}
- ${{number}}
- 뷰 템플릿은 데이터를 문자로 출력한다. 따라서 컨버터를 적용하게 되면 Integer 타입인 10000 을 String 타입으로 변환하는 컨버터인 IntegerToStringConverter를 실행하게 된다.
- 이 부분은 컨버터를 실행하지 않아도 타임리프가 숫자를 문자로 자동으로 변환히기 때문에 컨버터를 적용할 때와 하지 않을 때가 같다.
- ${{ipPort}}
- 뷰 템플릿은 데이터를 문자로 출력한다. 따라서 컨버터를 적용하게 되면 IpPort 타입을 String 타입으로 변환해야 하므로 IpPortToStringConverter 가 적용된다.
- 그 결과 127.0.0.1:8080 가 출력된다
ConverterController
@GetMapping("/converter/edit")
public String converterForm(Model model){
IpPort ipPort = new IpPort("127.0.0.1", 8080);
Form form = new Form(ipPort);
model.addAttribute("form", form);
//th:field 는 converter까지 적용해 버린다
return "converter-form";
}
@PostMapping("/converter/edit")
public String converterForm(@ModelAttribute Form form, Model model){
IpPort ipPort = form.getIpPort();
model.addAttribute("ipPort", ipPort);
return "converter-view";
}
@Data
static class Form{
private IpPort ipPort;
public Form(IpPort ipPort){
this.ipPort = ipPort;
}
}converter-form.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form th:object="${form}" th:method="post">
th:field <input type="text" th:field="*{ipPort}"><br/>
th:value <input type="text" th:value="*{ipPort}">(보여주기 용도)<br/>
<input type="submit"/>
</form>
</body>
</html>- 타임리프의 th:field 는 앞서 설명했듯이 id , name를 출력하는 등 다양한 기능이 있는데, 여기에 컨버전 서비스도 함께 적용된다
- GET /converter/edit
- th:field 가 자동으로 컨버전 서비스를 적용해주어서 ${{ipPort}} 처럼 적용이 되었다.
- 따라서 IpPort -> String 으로 변환된다.
- POST /converter/edit
- @ModelAttribute 를 사용해서 String -> IpPort로 변환된다.
728x90
'스프링 MVC 2편(백엔드 웹 개발 활용 기술)' 카테고리의 다른 글
| Ch10. 스프링 타입 컨버터 소개 - 포맷터를 지원하는 컨버전 서비스 (0) | 2022.03.22 |
|---|---|
| Ch10. 스프링 타입 컨버터 소개 - 포맷터(Formatter) (0) | 2022.03.22 |
| Ch10. 스프링 타입 컨버터 소개 - 스프링에 Converter 적용하기 (0) | 2022.03.22 |
| Ch10. 스프링 타입 컨버터 소개 - 컨버전 서비스(ConversionService) (0) | 2022.03.22 |
| Ch10. 스프링 타입 컨버터 소개 - 스프링 타입 컨버터 (0) | 2022.03.22 |