본문 바로가기
Spring Tutorial

[스프링MVC -상품 관리 웹 개발 2] 상품 목록 - 타임리프

by 미소5 2023. 8. 29.
  • 컨트롤러 로직
@Controller
@RequestMapping("/basic/items")
@RequiredArgsConstructor	//final이 붙은 멤버변수만 사용한 생성자 자동 생성
public class BasicItemController {

 	private final ItemRepository itemRepository;
    
    /** 상품 목록 */
 	@GetMapping
	public String items(Model model) {
	 	List<Item> items = itemRepository.findAll();	//모든 상품 조회
		model.addAttribute("items", items);		//items(모든 상품)을 모델에 담는다
 		return "basic/items";	//뷰 템플릿 호출
 	}
    
 	/**
 	* 테스트용 데이터 추가
 	*/
 	@PostConstruct	//해당 빈의 의존관계가 모두 주입되고 나면, 초기화 용도로 호출된다
 	public void init() {
 		itemRepository.save(new Item("testA", 10000, 10));
 		itemRepository.save(new Item("testB", 20000, 20));
 	}
 
}

 

  • @RequiredArgsConstructor
    • final이 붙은 멤버변수(itemRepository)만 사용해서 생성자를 자동으로 만들어준다.
//@Autowired  //생성자 하나만 있을땐 생략 가능
public BasicItemController(ItemRepository itemRepository) {
 	this.itemRepository = itemRepository;
}
  • 이렇게 생성자가 딱 1개만 있으면, 스프링이 해당 생성자에 @Autowired 로 의존관계를 주입해준다.
  • 따라서 final 키워드를 빼면 안된다! (빼면 ItemRepository 의존관계 주입 안됨)

 

  • 뷰 템플릿(templates)
    • /resources/templates/basic/items.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="utf-8">
 <link href="../css/bootstrap.min.css"
 th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
</head>
<body>

<div class="container" style="max-width: 600px">
 <div class="py-5 text-center">
 <h2>상품 목록</h2>
 </div>
 
 <div class="row">
 <div class="col">
 <button class="btn btn-primary float-end"
onclick="location.href='addForm.html'"
 th:onclick="|location.href='@{/basic/items/add}'|"
type="button">상품 등록</button>
 </div>
 </div>
 
 <hr class="my-4">
 
 <div>
 <table class="table">
 <thead>
 <tr>
 <th>ID</th>
 <th>상품명</th>
 <th>가격</th>
 <th>수량</th>
 </tr>
 </thead>
 <tbody>
 <tr th:each="item : ${items}">
 <td><a href="item.html" th:href="@{/basic/items/{itemId}(itemId=${item.id})}" th:text="${item.id}">회원id</a></td>
 <td><a href="item.html" th:href="@{|/basic/items/${item.id}|}" th:text="${item.itemName}">상품명</a></td>
 <td th:text="${item.price}">10000</td>
 <td th:text="${item.quantity}">10</td>
 </tr>
 </tbody>
 </table>
 </div>
 
</div> <!-- /container -->
</body>
</html>

 

  • 타임리프 사용 선언
<html xmlns:th="http://www.thymeleaf.org">

 

  • 속성 변경 - th:href
th:href="@{/css/bootstrap.min.css}"
  • 타임리프 뷰 템플릿을 거치게 되면,  원래 값을 th:xxx 값으로 변경한다. 만약 값이 없다면 새로 생성한다. 
    •  href="value1" 을  th:href="value2" 의 값으로 변경
    • HTML을 그대로 볼 때는 href 속성이 사용되고, 뷰 템플릿을 거치면 th:href 의 값이 href 로 대체되면서 동적으로 변경
    • 대부분의 HTML 속성을 th:xxx 로 변경할 수 있다.
  • 타임리프의 핵심은  th:xxx 가 붙은 부분은 서버사이드에서 렌더링 되고, 기존 것을 대체한다. th:xxx이 없으면 기존 html의 xxx속성이 그대로 사용된다.
    • HTML을 파일로 직접 열었을 때, th:xxx 가 있어도 웹 브라우저는 th: 속성을 알지 못하므로 무시한다. 따라서 HTML을 파일 보기를 유지하면서 템플릿 기능도 사용할 수 있다.

 

  • 상품 등록 폼으로 이동
    • 속성 변경 - th:onclick
onclick="location.href='addForm.html'"
th:onclick="|location.href='@{/basic/items/add}'|"
  • 리터럴 대체 문법이 사용되었다.

 

  • URL 링크 표현식  - @{...}
    • 타임리프는 URL 링크를 사용하는 경우,  @{...} 를 사용
th:href="@{/css/bootstrap.min.css}"
  • URL 링크 표현식을 사용하면  서블릿 컨텍스트를 자동으로 포함
  • URL 링크 표현식을 사용하면  경로를 템플릿처럼 편리하게 사용할 수 있다. 경로 변수( {itemId} ) 뿐만 아니라 쿼리 파라미터도 생성한다.
  • 예시
th:href="@{/basic/items/{itemId}(itemId=${item.id})}"
//상품 ID를 선택하는 링크: http://localhost:8080/basic/items/1
th:href="@{/basic/items/{itemId}(itemId=${item.id}, query='test')}"
//생성 링크: http://localhost:8080/basic/items/1?query=test

 

  • 리터럴 대체 문법을 활용해서, URL 링크 간단히 사용
 th:href="@{|/basic/items/${item.id}|}"
 //상품 이름을 선택하는 링크

 

  • 리터럴 대체 
    • |...|
    • 타임리프에서 문자와 표현식 등은 분리되어 있기 때문에 더해서 사용해야 한다. 다음과 같이 리터럴 대체 문법을 사용하면, 더하기 없이 편리하게 사용할 수 있다.
<span th:text="'Welcome to our application, ' + ${user.name} + '!'">
==>
<span th:text="|Welcome to our application, ${user.name}!|">

 

  • location.href='/basic/items/add' 를 만들어야 하는데, 그냥 사용하면 문자와 표현식을 각각 따로 더해서 사용해야 하므로 다음과 같이 복잡해진다. 
th:onclick="'location.href=' + '\'' + @{/basic/items/add} + '\''"
  • 리터럴 대체 문법을 사용하면  다음과 같이 편리하게 사용할 수 있다. 
th:onclick="|location.href='@{/basic/items/add}'|"

 

<tr th:each="item : ${items}">
  • 반복 출력 - th:each
    • 반복은 th:each 를 사용
      • 모델에 포함된 items 컬렉션 데이터가 item 변수에 하나씩 포함되고, 반복문 안에서 item 변수를 사용할 수 있다.
      • 컬렉션의 수 만큼 <tr>..</tr> 하위 테그를 포함해서 생성된다.

 

<td th:text="${item.price}">10000</td>
  •  변수 표현식 - ${...}
    • 모델에 포함된 값이나, 타임리프 변수로 선언한 값을 조회할 수 있다.
    • 프로퍼티 접근법을 사용한다. ( item.getPrice() )

 

  •  내용 변경 - th:text
    • 내용의 값을 th:text 의 값으로 변경
<td th:text="${item.price}">10000</td>
//10000을 ${item.price} 의 값으로 변경

 

 

  • 타임리프는 순수 HTML 파일을 웹 브라우저에서 열어도 내용을 확인할 수 있고, 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있다.  이렇게 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 네츄럴 템플릿 (natural templates) 이라 한다.
    • JSP 파일은 웹 브라우저에서 그냥 열면 JSP 소스코드와 HTML이 뒤죽박죽 되어서,  오직 서버를 통해서 JSP를 열어야 한다. → 스프링부트에선 JSP는 권장하지않는다.

 

 

 

728x90
반응형

'Spring Tutorial' 카테고리의 다른 글

[스프링MVC -상품 관리 웹 개발 4] 상품 등록 폼  (0) 2023.08.31
[스프링MVC -상품 관리 웹 개발 3] 상품 상세  (0) 2023.08.30
[스프링MVC 기본 기능 11] 요청 매핑 핸들러 어댑터 구조  (1) 2023.08.27
[스프링MVC 기본 기능 10] HTTP 메시지 컨버터  (0) 2023.08.26
[스프링MVC 기본 기능 9] HTTP 응답 데이터  (0) 2023.08.24

관련글

티스토리툴바