[SPRING] 타임리프(맛보기) & @ModelAttribute

7 분 소요

✅ 상품 목록

컨트롤러

컨트롤러 로직은 itemRepository에서 모든 상품을 조회한 다음에 모델에 담는다. 그리고 뷰 템플릿을 호출한다.

@Controller
@RequestMapping("/basic/items")
//@RequiredArgsConstructor // final이 붙은 멤버변수만 사용해서 생성자를 자동으로 만들어준다.
public class BasicItemController {

    private final ItemRepository itemRepository;

    @Autowired // 생성자가 하나일 때 생략 가능
    public BasicItemController(ItemRepository itemRepository) {
        this.itemRepository = itemRepository;
    }

    @GetMapping
    public String items(Model model){
        List<Item> items = itemRepository.findAll();
        model.addAttribute("items", items);
        return "basic/items";
    }

    /**
     * 테스트용 데이터 추가
     */
    @PostConstruct // 해당 빈의 의존관계가 모두 주입되고 나면 초기화 용도로 호출된다.
    public void init(){
        itemRepository.save(new Item("itemA", 10000, 10));
        itemRepository.save(new Item("itemB", 20000, 20));
    }
}

뷰 템플릿

뷰 템플릿 파일은 /resources/templates 하위에 생성한다.
/resources/templates/basic/items.html

<!DOCTYPE HTML>
<!--✨ 타임리프 사용 선언--> 
<html xmlns:th="http://www.thymeleaf.org"> 
<head>
    <meta charset="utf-8">
    <!--✨ th:href 추가--> 
    <link th:href="@{/css/bootstrap.min.css}" 
            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">
            <!--✨ th:onclick 추가--> 
            <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>
            <!--✨ th:each 추가--> 
            <tr th:each="item : ${items}">
                <!--✨ th:href / th:text 추가--> 
                <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> 

</body>
</html>

1. 타임리프 사용 선언

<html xmlns:th="http://www.thymeleaf.org">

스프링 부트 버전 확인 - 2.6.9

타임리프 리소스에 빨간 밑줄이 생성된다면, build.gradle에서 아래처럼 스프링 부트 버전을 바꾼 뒤 reload를 진행한다.
(2.7.0 버전에서는 작동하지 않고 2.6.9 버전에서는 잘 작동한다!)

plugins {
	id 'org.springframework.boot' version '2.6.9'
	id 'io.spring.dependency-management' version '1.0.11.RELEASE'
	id 'java'
}

2. 속성 변경 - th:href

th:href="@{/css/bootstrap.min.css}"

href="value1" 을 th:href="value2" 의 값으로 변경한다.
타임리프 뷰 템플릿을 거치게 되면 원래 값을 th:xxx 값으로 변경한다. 만약 값이 없다면 새로 생성한다.
HTML을 그대로 볼 때는 href 속성이 사용되고, 뷰 템플릿을 거치면 th:href 의 값이 href 로 대체되면서 동적으로 변경할 수 있다.
대부분의 HTML 속성을 th:xxx 로 변경할 수 있다.

타임리프 핵심

핵심은 th:xxx 가 붙은 부분은 서버사이드에서 렌더링 되고, 기존 것을 대체한다. th:xxx 이 없으면 기존 html의 xxx 속성이 그대로 사용된다.
HTML을 파일로 직접 열었을 때, th:xxx 가 있어도 웹 브라우저는 th: 속성을 알지 못하므로 무시한다.
따라서 HTML을 파일 보기를 유지하면서 템플릿 기능도 할 수 있다.

3. URL 링크 표현식 - @{…}

th:href="@{/css/bootstrap.min.css}"

@{...} : 타임리프는 URL 링크를 사용하는 경우 @{...} 를 사용한다. 이것을 URL 링크 표현식이라 한다.
URL 링크 표현식을 사용하면 서블릿 컨텍스트를 자동으로 포함한다. (요즘에는 서블릿 컨텍스트를 잘 사용하지 않는다.)

4. 속성 변경 - th:onclick

onclick="location.href='addForm.html'"
th:onclick="|location.href='@{/basic/items/add}'|"

여기에는 다음에 설명하는 리터럴 대체 문법이 사용되었다. 자세히 알아보자.

5. 리터럴 대체 - |…|

|...| :이렇게 사용한다.

타임리프에서 문자와 표현식 등은 분리되어 있기 때문에 더해서 사용해야 한다.
- <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} + '\''" (백슬래시(\)를 이용해 작은따옴표를 escape 처리 해주어야 한다)
리터럴 대체 문법을 사용하면 다음과 같이 편리하게 사용할 수 있다.
- th:onclick="|location.href='@{/basic/items/add}'|"

6. 반복 출력 - th:each

<tr th:each="item : ${items}">

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

7. 변수 표현식 - ${…}

<td th:text="${item.price}">10000</td>

모델에 포함된 값이나, 타임리프 변수로 선언한 값을 조회할 수 있다.
프로퍼티 접근법을 사용한다. ( item.getPrice() )

8. 내용 변경 - th:text

<td th:text="${item.price}">10000</td>

내용의 값을 th:text 의 값으로 변경한다.
여기서는 10000을 ${item.price} 의 값으로 변경한다.

9. URL 링크 표현식2 - @{…}

th:href="@{/basic/items/{itemId}(itemId=${item.id})}"

상품 ID를 선택하는 링크를 확인해보자.
URL 링크 표현식을 사용하면 경로를 템플릿처럼 편리하게 사용할 수 있다.
경로 변수( {itemId} ) 뿐만 아니라 쿼리 파라미터도 생성한다.
예) 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}|}"

상품명을 선택하는 링크를 확인해보자. (뷰 템플릿 코드 아래쪽에 위치)
리터럴 대체 문법을 활용해서 간단히 사용할 수도 있다.

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

✅ 상품 등록 폼

컨트롤러

기존 BasicItemController에 아래 코드를 추가한다.

// 상품 등록 폼
@GetMapping("/add")
    public String addForm(){
        return "basic/addForm";
    }

// 상품 등록 처리
@PostMapping("/add")
public String save(){
    return "basic/addForm";
}

뷰 템플릿

뷰 템플릿 파일은 /resources/templates 하위에 생성한다.
/resources/templates/basic/addForm.html

<!DOCTYPE HTML>
<!--✨ 타임리프 사용 선언 --> 
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <!--✨ th:href 추가--> 
    <link th:href="@{/css/bootstrap.min.css}"
            href="../css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            max-width: 560px;
        }
    </style>
</head>
<body>

<div class="container">

    <div class="py-5 text-center">
        <h2>상품 등록 폼</h2>
    </div>

    <h4 class="mb-3">상품 입력</h4>

    <!--✨ th:action 추가--> 
    <form action="item.html" th:action="@{/basic/items/add}" method="post">
        <div>
            <label for="itemName">상품명</label>
            <input type="text" id="itemName" name="itemName" class="form-control" placeholder="이름을 입력하세요">
        </div>
        <div>
            <label for="price">가격</label>
            <input type="text" id="price" name="price" class="form-control" placeholder="가격을 입력하세요">
        </div>
        <div>
            <label for="quantity">수량</label>
            <input type="text" id="quantity" name="quantity" class="form-control" placeholder="수량을 입력하세요">
        </div>

        <hr class="my-4">

        <div class="row">
            <div class="col">
                <button class="w-100 btn btn-primary btn-lg" type="submit">상품 등록</button>
            </div>
            <div class="col">
                <!--✨ th:onclick 추가--> 
                <button class="w-100 btn btn-secondary btn-lg"
                        onclick="location.href='items.html'"
                        th:onclick="|location.href='@{/basic/items}'|"
                        type="button">취소</button>
            </div>
        </div>

    </form>

</div> 
</body>
</html>

10. 속성 변경 - th:action

th:action

HTML form에서 action 에 값이 없으면 현재 URL에 데이터를 전송한다.
- <form action="item.html" th:action method="post">
- <form action="item.html" th:action="@{/basic/items/add}" method="post">
- 두 가지 다 사용할 수 있다.
상품 등록 폼의 URL과 실제 상품 등록을 처리하는 URL을 똑같이 맞추고 HTTP 메서드로 두 기능을 구분한다.
- 상품 등록 폼: GET /basic/items/add
- 상품 등록 처리: POST /basic/items/add
이렇게 하면 하나의 URL로 등록 폼과, 등록 처리를 깔끔하게 처리할 수 있다.

✅ 상품 등록 처리 - @ModelAttribute

이제 상품 등록 폼에서 전달된 데이터로 실제 상품을 등록 처리해보자. 상품 등록 폼은 다음 방식으로 서버에 데이터를 전달한다.

POST - HTML Form
- content-type: application/x-www-form-urlencoded
- 메시지 바디에 쿼리 파리미터 형식으로 전달 itemName=itemA&price=10000&quantity=10
- 예) 회원 가입, 상품 주문, HTML Form 사용

컨트롤러

기존 BasicItemController에 아래 코드를 추가한다.

v1 - @RequestParam

요청 파라미터 형식을 처리해야 하므로 @RequestParam을 사용하자

@PostMapping("/add")
public String addItemV1(@RequestParam String itemName,
                    @RequestParam int price,
                    @RequestParam Integer quantity,
                    Model model){

    Item item = new Item();
    item.setItemName(itemName);
    item.setPrice(price);
    item.setQuantity(quantity);

    itemRepository.save(item);
    model.addAttribute("item", item);

    return "basic/item";
}

먼저 @RequestParam String itemName : itemName 요청 파라미터 데이터를 해당 변수에 받는다.
Item 객체를 생성하고 itemRepository 를 통해서 저장한다.
저장된 item 을 모델에 담아서 뷰에 전달한다.

v2 - @ModelAttribute

@RequestParam 으로 변수를 하나하나 받아서 Item 을 생성하는 과정은 불편했다.
이번에는 @ModelAttribute 를 사용해서 한번에 처리해보자.

@PostMapping("/add")
public String addItemV2(@ModelAttribute("item") Item item){

    itemRepository.save(item);
//  model.addAttribute("item", item); // @ModelAttribute에 의해 자동 추가, 생략 가능

    return "basic/item";
}

@ModelAttribute - 1) 요청 파라미터 처리 💫

@ModelAttribute 는 Item 객체를 생성하고, 요청 파라미터의 값을 프로퍼티 접근법(setXxx)으로 입력해준다.

@ModelAttribute - 2) Model 추가 💫

@ModelAttribute 는 중요한 한가지 기능이 더 있는데, 바로 모델(Model)에 @ModelAttribute 로 지정한 객체를 자동으로 넣어준다.🌟
(지금 코드를 보면 model.addAttribute("item", item) 가 주석처리 되어 있어도 잘 동작하는 것을 확인할 수 있다. 즉, v1에서처럼 Model 객체를 파라미터로 받아오지 않아도 된다.)
모델에 데이터를 담을 때는 이름이 필요한데, 이름은 @ModelAttribute에 지정한 name(value) 속성을 사용한다.
만약 다음과 같이 @ModelAttribute 의 이름을 다르게 지정하면 다른 이름으로 모델에 포함된다.

모델에 hello 이름으로 저장
- @ModelAttribute("hello") Item item
- model.addAttribute("hello", item);

🚨 주의
만약 hello라는 이름으로 모델을 저장한다면, 뷰에서 th:value="${hello.price}"와 같이 모델 정보를 받아와야한다.

v3 - @ModelAttribute 이름 생략

@PostMapping("/add")
    public String addItemV3(@ModelAttribute Item item,
                            Model model){

        // 클래스 명(Item)의 첫 글자를 소문자로 바꿔서 item으로 모델에 저장
        itemRepository.save(item);

        return "basic/item";
    }

@ModelAttribute 의 이름을 생략하면 모델에 저장될 때 클래스명을 사용한다.
이때 클래스의 첫글자만 소문자로 변경해서 등록한다.
예제에서는 클래스 명이 Item이기 때문에 모델에 item 이름으로 저장한다.

v4 - @ModelAttribute 애노테이션 생략

@PostMapping("/add")
    public String addItemV4(Item item){

        itemRepository.save(item);

        return "basic/item";
    }

앞서 배웠던 규칙을 다시 떠올려보자.

스프링은 @ModelAttribute, @RequestParam과 같은 해당 애노테이션을 생략시 다음과 같은 규칙을 적용한다.

String, int, Integer 같은 단순 타입 -> @RequestParam이 자동으로 적용된다.

나머지 -> @ModelAttribute이 자동으로 적용된다. (argument resolver 로 지정해둔 타입 외)

이때, v3에서와 마찬가지로 클래스 명의 첫번째 문자를 소문자로 변경한 item 이름으로 모델에 저장된다.
(@ModelAttribute 애노테이션까지 생략할 지 말 지는 개인의 선택이다.)

✅ 상품 수정

컨트롤러

기존 BasicItemController에 아래 코드를 추가한다.
수정에 필요한 정보를 조회하고, 수정용 폼 뷰를 호출한다.

// 상품 수정 폼
@GetMapping("/{itemId}/edit")
public String editForm(@PathVariable Long itemId, Model model){
    Item item = itemRepository.findById(itemId);
    model.addAttribute("item", item);
    return "basic/editForm";
}

// 상품 수정 처리
@PostMapping("/{itemId}/edit")
public String edit(@PathVariable Long itemId, @ModelAttribute Item item){
    itemRepository.update(itemId, item);
    return "redirect:/basic/items/{itemId}";
}

리다이렉트

상품 수정은 마지막에 뷰 템플릿을 호출하는 대신에 상품 상세 화면으로 이동하도록 리다이렉트를 호출한다.

스프링은 redirect:/... 으로 편리하게 리다이렉트를 지원한다.
redirect:/basic/items/{itemId}
- 컨트롤러에 매핑된 @PathVariable 의 값은 redirect 에도 사용 할 수 있다.
- redirect:/basic/items/{itemId} -> {itemId} 는 @PathVariable Long itemId 의 값을 그대로 사용한다.

참고

HTML Form 전송은 PUT, PATCH를 지원하지 않는다. GET, POST만 사용할 수 있다.

PUT, PATCH는 HTTP API 전송시에 사용

스프링에서 HTTP POST로 Form 요청할 때 히든 필드를 통해서 PUT, PATCH 매핑을 사용하는 방법이 있지만, HTTP 요청상 POST 요청이다.

뷰 템플릿

뷰 템플릿 파일은 /resources/templates 하위에 생성한다.
/resources/templates/basic/editForm.html

<!DOCTYPE HTML>
<!--✨ 타임리프 사용 선언 --> 
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <!--✨ th:href 추가--> 
    <link th:href="@{/css/bootstrap.min.css}"
            href="../css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            max-width: 560px;
        }
    </style>
</head>
<body>

<div class="container">

    <div class="py-5 text-center">
        <h2>상품 수정 폼</h2>
    </div>

    <!--✨ th:action 추가--> 
    <form action="item.html" th:action method="post">
        <div>
            <label for="id">상품 ID</label>
            <!--✨ th:value 추가--> 
            <input type="text" id="id" name="id" class="form-control" value="1" th:value="${item.id}" readonly>
        </div>
        <div>
            <label for="itemName">상품명</label>
            <!--✨ th:value 추가--> 
            <input type="text" id="itemName" name="itemName" class="form-control" value="상품A" th:value="${item.itemName}">
        </div>
        <div>
            <label for="price">가격</label>
            <!--✨ th:value 추가--> 
            <input type="text" id="price" name="price" class="form-control" value="10000" th:value="${item.price}">
        </div>
        <div>
            <label for="quantity">수량</label>
            <!--✨ th:value 추가--> 
            <input type="text" id="quantity" name="quantity" class="form-control" value="10" th:value="${item.quantity}">
        </div>

        <hr class="my-4">

        <div class="row">
            <div class="col">
                <button class="w-100 btn btn-primary btn-lg" type="submit">저장</button>
            </div>
            <div class="col">
                <!--✨ th:onclick 추가--> 
                <button class="w-100 btn btn-secondary btn-lg"
                        onclick="location.href='item.html'"
                        th:onclick="|location.href='@{/basic/items/{itemId}(itemId=${item.id})}'|"
                        type="button">취소</button>
            </div>
        </div>

    </form>

</div> <!-- /container -->
</body>
</html>

💛 개인 공부 기록용 블로그입니다. 👻

맨 위로 이동하기

Twitter Facebook LinkedIn

Minju412

[SPRING] 타임리프(맛보기) & @ModelAttribute

✅ 상품 목록

컨트롤러

뷰 템플릿

1. 타임리프 사용 선언

스프링 부트 버전 확인 - 2.6.9

2. 속성 변경 - th:href

타임리프 핵심

3. URL 링크 표현식 - @{…}

4. 속성 변경 - th:onclick

5. 리터럴 대체 - |…|

예시

6. 반복 출력 - th:each

7. 변수 표현식 - ${…}

8. 내용 변경 - th:text

9. URL 링크 표현식2 - @{…}

URL 링크 간단히

✅ 상품 등록 폼

컨트롤러

뷰 템플릿

10. 속성 변경 - th:action

✅ 상품 등록 처리 - @ModelAttribute

컨트롤러

v1 - @RequestParam

v2 - @ModelAttribute

@ModelAttribute - 1) 요청 파라미터 처리 💫

@ModelAttribute - 2) Model 추가 💫

v3 - @ModelAttribute 이름 생략

v4 - @ModelAttribute 애노테이션 생략

✅ 상품 수정

컨트롤러

리다이렉트

뷰 템플릿

공유하기

참고

누군가 나의 EC2를 해킹하여 사용하는 경우

[Trouble Shooting] AWS EC2 멈춤 현상 (CPU Utilization)

EC2, Docker Compose를 이용한 애플리케이션 배포 (with. Docker Hub)

[BOJ] 10448 - 유레카 이론 (🥉 브론즈 1티어)