[Thymeleaf][SpringBoot]스프링이 지원하는 타임리프 기능(입력위주)

 

 타임리프 단독으로 사용하는 것이 아니라, 스프링이 팍팍 밀어주는 타임리프는 스프링이 지원해주는 기능을 따로 사용할 수가 있다.
 특히 스프링부트를 사용하면, 다운로드 받을 때 타임리프만 추가하면 매뉴얼 설정 필요없이 사용할 수 있다.

※ 매뉴얼 : https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html

 

---

 

 

• <form> 
  
  1. 자바로직에서 빈 객체를 보내준다.

     

     java 로직

     

  2. <form action="item.html" th:action th:object="${item}" method="post">
     th:objec로 해당 빈 객체를 가져온다.
     
     
  3. <input type="text" th:field="*{itemName}" 
     th:field에서 해당 객체의 필드들을 가져올 수 있다.
     
     ※ 이를 '선택 변수' 라고 하며, ${item.itemName}으로도 적을 수 있다.
     
     
  4. 결과
     

     

     • th:field에서 지정한 이름으로 id와 name이 생성되고, 빈 value도 추가되었다.
  5. 수정 폼 예시
     
     • <input type="text" id="id" name="id" class="form-control" value="1" th:value="${item.id}" readonly>
       →
       <input type="text" class="form-control" value="1" th:field="*{id}" readonly>
       이와 같이 더 간단하게 수정할 수 있다.
       
       
     • code

       

       되도록 id는 지우지 말자..이유 모를 에러가 났다😅

• 단일 체크박스
  
  1. 체크박스를 만들기 위한 로직을 추가하였다.
     

     

     경로와 파일

     

     

     enum

     

  2. 타임리프

     

     
     
     • 사용법1

       

       • checkbox의 id와 동일하게 hidden값을 _id로 지정하면
         → 미체크 시  false로, 체크 시 true로 자동으로 스프링이 넘겨받는다.
         
         ※ 하지만 이는 일일히 hidden필드를 넣어줘야 하므로 아래처럼 사용한다.
         
         
     • 사용법2
     • <input type="checkbox" id="open" th:field="*{open}"  class="form-check-input">
       

       

       th:field만 사용하면 아래처럼 hidden필드까지 생성해준다.
       
       
     • 결과

       

  3. 상품상세

     

     

     위 코드와 같다. 수정 불가능하게끔 disabled만 추가됐다.

     

     결과

     
     
     • 타임리프는 boolean값에 따라 알아서 true이면 checked를 만들어준다.
       
       
     • false일 경우 checked 속성 자체를 안 만든다.
       
       
       
• 멀티 체크박스
  
  • java로직

    

    ModelAttribute를 전역변수로 지정해 값을 가져온다.

  • 타임리프
    

    

  • 결과

    

    

  • <div th:each="region : ${regions}" class="form-check form-check-inline">
    → 반복문으로 regions의 값들을 불러온다.
    
    
  • <input type="checkbox" th:field="*{regions}" th:value="${region.key}" class="form-check-input">
    → value 값으로 key를 담아준다.
    반복문이기 때문에 id, name, value 생성은 th:field를 이용해 자동화한다.
    (여기서 *{regions}만 반복문으로 불러오는 게 아니라 <form>에서 불러온 값이다)
    
    
  • <label th:for="${#ids.prev('regions')}" th:text="${region.value}" class="form-check-label">서울</label>
    →여기서 ${#ids.prev('regions')}는 위 th:field에 의존한다.
    이렇게 하면 해당 데이터에 맞는 text를 적어줄 수 있다.
    
    
  • 히든 필드가 추가되어, 값이 선택하지 않아도 빈 값[ ]으로로 반환된다.
    
    
  • 상품 상세에 적용해보자

    

    
    
    • th:value로 가져온 값이 있으면 th:field가 알아서 checked로 만들어준다.
      

      

      

      
      
      
• 라디오 버튼
  
  • code

    

    enum class

    

    controller

    

    thymeleaf

  • 결과

    

    

    radio는 한번 선택하면, 체크해제가 불가능하기 때문에 hidden필드가 들어가지 않았다.

  • 다른 방법으로 타임리프에서 Enum클래스 접근하는 방식으로는 이런 코드가 있다.
     th:each="type : ${T(neuyshop.domain.item.itemType).values()}" 
    "변수명 : ${T(경로).values()}"
    
    
    
• 셀렉트 박스
  • code

    

    

    

  • 결과

    

    

  • <select>태그를 사용한다는 것 외에는 위 코드들과 큰 차이는 없다.
    
    

 

---

※ 참조 : https://www.inflearn.com/roadmaps/373E