5_짧_th:field와 th:value

※ 이 포스트는 실습 과정에서 학습한 사항을 기록으로 남기기위해 작성하므로 정말 단순 참고용으로만 봐주세요.

다른 포스트들과 달리 글을 다듬지 않아 많이 투박할 수 있습니다.

궁금한 사항이나 틀린 내용이 있다면 알려주시면 감사하겠습니다.

 

---

사용 환경 : java11, spring 2.4.1, thymleaf

 

김영한님의 스프링 mvc 2의 타임리프 파트 학습 중 꽤 헤맨 부분이 존재해서 포스트로 남기려고 합니다.

 

일반적으로 타임리프로 html 작성할때 input 태그에 th:field를 자주 넣으실거라 생각하는데요. 여기서 제가 처음에 실습하다 헷갈린 것이 th:field와 th:value를 같이 쓰다 헤맨 적이 있습니다. 예시를 들어 설명하면, 아래는 제 프로젝트 코드 중 일부를 가져왔습니다.

 

 <form action="valid.html" th:action="@{/valid/{id}(id = ${oldCode.id})}" th:object="${validForm}" method="post">
            <div class="form-group">
                <label th:for="allcode">입력된 html코드 전문</label>
                <textarea rows="10" cols="50" class="form-control" th:field="*{allCode}"></textarea>
            </div>

보시면 form에 th:object로 validForm 객체를 가져오고 아래 textarea에서 th:field="*{allCode)"를 통해 validForm.allCode와 같은 의미로 사용했습니다. 그런데 처음에 제가 작성한 코드는 좀 다릅니다.

 

// 수정 전
...
<textarea rows="10" cols="50" class="form-control" th:field="*{allCode}" th:value="${oldCode.allCode}"></textarea>

전부 똑같지만 textarea 태그에 th:value가 들어있습니다. 처음 목적은 textarea에 사용자가 입력한 값은 th:field로 이동하지만 처음 페이지에서 보여지는 값은 th:value로 하는 것이었는데 해당 코드는 작동하지 않았습니다. 알아듣기 쉽게 요약하자면 작성하던 글을 수정할때 작성 중인 내용을 당연히 불러와서 수정하는게 맞으니 코드를 그렇게 짰는데 th:value 코드로는 원하는 대로 작동을 안한거죠.

 

좀 헤매다가 찾은 내용은 th:field는 말 그대로 객체의 필드이며 그렇기에 일반적으로 상위에 th:object를 함께 사용하는 것이 좋고 th:field 사용시 태그의 value, name, id가 객체의 필드값으로 정해지므로 th:value와 중복될 수 없다는 것입니다.

 

그래서 위의 예시에서 든 프로젝트 코드를 미리 validForm에 필드를 채워주어 value가 필요없도록 코드를 수정하여 일단락되는줄 알았으나 오늘 타임리프 강의를 듣다가 이와 조금 다른 이야기가 나왔습니다.

 

...
<input type="checkbox" th:field="*{regions}" th:value="${region.key}" class="form-check-input">

이 코드는 강의 내용 중 html 일부인데 보시면 th:field와 fh:value가 서로 공존하는 것을 보실 수 있고 해당 코드는 잘 작동합니다. 그래서 위에서 한 얘기와 좀 다른 탓에 조금 찾아봤는데 얼마 안되서 김영한님의 Q&A 중 하나를 읽고 왜 다른지 알게 되었습니다.

 

위에서 제가 안됐던 코드의 input type은 textarea고 마찬가지로 text일때도 속성 중복이 되지 않습니다. 하지만 강의 내용 중 코드의 input type은 checkbox이며 이때는 th:value를 따로 지정해주어야한다고 합니다. 아래 첨부된 타임리프 매뉴얼에 더 자세히 소개되어 있습니다. 

 

---

 

세줄 요약

1. th:field가 th:value, name, id를 포함하는 관계이므로 일반적으로 th:field와 th:value는 중복 안됨

2. 하지만 input type이 checkbox일 때는 th:field와 th:value를 따로 지정해주어야 함

3. 솔직히 타임리프 매뉴얼 보면 다 나오는데 읽기 귀찮아서 안봤다가 시간 엄청 낭비함

 

 

 

 

refer

https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2/dashboard

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의

https://stackoverflow.com/questions/33758200/thymeleaf-thfield-overwrites-thvalue

Thymeleaf th:field overwrites th:value

https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html#checkbox-fields

Tutorial: Thymeleaf + Spring