Thymeleaf(block, text, each)

Spring EL(스프링 표현 언어)
- ${key} : 변수, Model 등을 이용해서 세팅한 값 출력

 

* Model
- Spring에서 데이터 전달 역할을 하는 객체
- org.springframework.ui 패키지
- @SessionAttribute와 함께 사용할 경우 session scope 반환

[기본 사용법]
Model.addAttribute("key", value);
Model.addAttribute("html에 전달가능한 이름", 전달할 값);

 

th:block 태그
    - Thymeleaf에서 제공하는 유일한 태그
    - Thymeleaf는 태그 내에 th 속성을 작성해서 정의하는게 일반적이지만
      th 속성을 작성할 태그가 존재하지 않을 때 사용

    - th:text 보단 조건, 반복문과 같이 사용하는 경우가 많음

productName : <th:block th:text="${productName}">상품명</th:block>
            / <span th:text="${productName}">상품명</span>
            <!-- th:block과 span 태그는 동일하게 사용할 수 있지만
                th:block은 조건이나 반복문에서 많이 사용
             -->
price :
<span class="price">
    <th:block th:text="${price}">가격</th:block>
</span>
<!-- th블록을 이용해서 productCompany 만들고 Controller에서 khcompany 회사명 전달받기 -->

company :
<span class="company">
    <th:block th:text="${company}">회사</th:block>
</span>

 

@GetMapping("ex1")
public String ex1(HttpServletRequest req, Model model) {

    // 단일 값(숫자, 문자열) Model을 이용해서 html 전달
    model.addAttribute("productName", "종이컵");
    model.addAttribute("price", 2000);
    model.addAttribute("company", "KHcompany");

화면 출력 결과값

 

 

th:text 속성 = "속성값"
- 타임리프 이용해서 속성 값을 작성된 태그의 내용(innerText)로 출력

* th 속성은 출력된 화면(응답화면)에서 보여지지 않음
-> 해석된 후 사라짐

    <h4 th:text="${test1}">test1 값 확인</h4>
    <h4 th:text="${test2}">test2 값 확인</h4>

 

@GetMapping("ex1")
public String ex1(HttpServletRequest req, Model model) {

    // DB에서 가져온 값을 보여줄 때 사용하는 메서드
    req.setAttribute("test1", "HttpServletRequest로 전달한 값");
    model.addAttribute("test2", "Model로 전달한 값");

 

 

th:each="item : ${List 또는 배열}"

- 향상된 for 문
- List 또는 배열의 길이 만큼 반복
- 매 반복 시 마다 List 또는 배열의 요소를 차례대로 꺼내 item 변수에 저장
  (item 변수명은 자유롭게 작성)

 

    <ul>
    	<li th:text="${fruitList}">과일 목록</li>
    </ul>
    <ul>
    	<li th:text="${fruitList[0]}">0번째 과일 이름</li>
    	<li th:text="${fruitList[1]}">1번째 과일 이름</li>
    	<li th:text="${fruitList[2]}">2번째 과일 이름</li>
    </ul>
    <ul>
    	<li th:text="${animal}">동물 리스트</li>
    </ul>
    <!-- ul,li로 index 0~2 동물 이름 표시 -->
    <ul>
    	<li th:text="${animal[0]}">0번째 동물 이름</li>
    	<li th:text="${animal[1]}">1번째 동물 이름</li>
    	<li th:text="${animal[2]}">2번째 동물 이름</li>
    </ul>

public String ex1(HttpServletRequest req, Model model) {

    //복수 값(배열, List)을 이용해 html 전달
    List<String> fruitList = new ArrayList<>();
    fruitList.add("사과");
    fruitList.add("딸기");
    fruitList.add("바나나");

    List<String> animal = new ArrayList<>();
    animal.add("호랑이");
    animal.add("토끼");
    animal.add("거북이");

    model.addAttribute("fruitList", fruitList);
    model.addAttribute("animal", animal);
}

 

th:each문 출력