Spring/MVC

[Spring MVC] 타임리프 문법 정리

lumana 2025. 2. 13. 00:10

 

 

타임리프 몰아서 정리

#Spring/Thymeleaf


/타임리프 사용 선언
/th:xxx=“value2”
/타임리프 속성
/th:href
/th:onclick
/반복 출력 - th:each
/반복 상태 유지
/내용 변경 - th:text
/속성 변경 - th:value
/속성 변경 - th:action
/조건문 평가 - th:if, th:switch
/텍스트 - text, utext
/Escape
/HTML 엔티티
/Unescape
/th:inline="none"
/속성 값 설정
/속성 추가
/checked 처리
/블록 -
/URL 링크 표현식 - @{...}
/리터럴 대체 - |...|
/변수 표현식 - ${...}
/지역 변수 선언 - th:with
/URL 링크 표현식2 - @{...}
/URL 링크 간단히
/타임리프 기본 객체
/유틸리티 객체와 날짜
/리터럴
/연산
/주석
/자바스크립트 인라인
/템플릿 조각
/템플릿 레이아웃
/입력 폼 처리
/*{...}: 선택 변수 식
/th:field
/체크 박스
/체크박스 - 타임리프
/체크 박스 - 멀티
/라디오 버튼
/타임리프에서 ENUM 직접 사용하기
/셀렉트 박스
/메시지
/국제화
/타임리프 메시지 적용


타임리프 사용 선언


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

th:xxx=“value2”

  • 원래 존재하던 xxx 태그(xxx=“value1”) 를 th:xxx의 값으로 변경한다(“value2”)
  • 핵심은 th:xxx가 붙은 부분은 서버사이드에서 렌더링 되고, 기존 것을 대체한다. th:xxx가 없으면 기존 HTML의 xxx 속성이 그대로 사용된다.

순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 네츄럴 템플릿(natural templates)이라 한다.


타임리프 속성

th:href

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

원래 경로는 ../css/bootstrap.min.css로 상대 경로였다. 하지만 타임리프를 통해 절대 경로로 치환하여 모든 곳에서 css 파일을 사용할 수 있도록 변경하였다.


th:onclick

상품 등록 폼으로 이동

  • onclick="location.href='addForm.html'"
  • th:onclick="|location.href='@{/basic/items/add}’|”
    • 버튼 태그에 onclick 속성 넣을 때 유용하다. 자바스크립트로 메서드 안만들어도 됨.

반복 출력 - th:each

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

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

<table border="1">
    <tr>
        <th>username</th>
        <th>age</th>
    </tr>
    <tr th:each="user : ${users}">
        <td th:text="${user.username}">username</td>
        <td th:text="${user.age}">0</td>
    </tr>
</table>

<table border="1">
    <tr>
        <th>count</th>
        <th>username</th>
        <th>age</th>
        <th>etc</th>
    </tr>
    <tr th:each="user, userStat : ${users}">
        <td th:text="${userStat.count}">username</td>
        <td th:text="${user.username}">username</td>
        <td th:text="${user.age}">0</td>
        <td>
            index = <span th:text="${userStat.index}"></span>
            count = <span th:text="${userStat.count}"></span>
            size = <span th:text="${userStat.size}"></span>
            even? = <span th:text="${userStat.even}"></span>
            odd? = <span th:text="${userStat.odd}"></span>
            first? = <span th:text="${userStat.first}"></span>
            last? = <span th:text="${userStat.last}"></span>
            current = <span th:text="${userStat.current}"></span>
        </td>
    </tr>
</table>

반복 기능

<tr th:each="user : ${users}">

반복 시 오른쪽 컬렉션 (${users})의 값을 하나씩 꺼내서 왼쪽 변수 (user)에 담아서 태그를 반복 실행합니다. th:each는 List뿐만 아니라 배열, java.util.Iterable, java.util.Enumeration을 구현한 모든 객체를 반복에 사용할 수 있습니다. Map도 사용할 수 있는데 이 경우 변수에 담기는 값은 Map.Entry입니다.



반복 상태 유지


<tr th:each="user, userStat : ${users}">

반복의 두 번째 파라미터를 설정해서 반복의 상태를 확인할 수 있습니다.
두 번째 파라미터는 생략 가능한데, 생략하면 지정한 변수명 (user) + Stat가 됩니다.
여기서는 user + Stat = userStat이므로 생략 가능합니다.


반복 상태 유지 기능


  • index: 0부터 시작하는 값
  • count: 1부터 시작하는 값
  • size: 전체 사이즈
  • even, odd: 홀수, 짝수 여부 (boolean)
  • first, last: 처음, 마지막 여부 (boolean)
  • current: 현재 객체

내용 변경 - th:text


<td th:text="${item.price}">10000</td>
  • 내용의 값을 th:text의 값으로 변경한다.
  • 여기서는 10000을 ${item.price}의 값으로 변경한다.

속성 변경 - th:value

th:value="${item.id}"
  • 모델에 있는 item 정보를 획득하고 프로퍼티 접근법으로 출력한다. (item.getId())
  • value 속성을 th:value 속성으로 변경한다.

속성 변경 - th:action

  • th:action
  • HTML form에서 action에 값이 없으면 현재 URL에 데이터를 전송한다.
  • 상품 등록 폼의 URL과 실제 상품 등록을 처리하는 URL을 똑같이 맞추고 HTTP 메서드로 두 기능을 구분한다.
    • 상품 등록 폼: GET /basic/items/add
    • 상품 등록 처리: POST /basic/items/add

조건문 평가 - th:if, th:switch

/**
 * RedirectAttributes
 */
@PostMapping("/add")
public String addItemV6(Item item, RedirectAttributes redirectAttributes) {
    Item savedItem = itemRepository.save(item);
    redirectAttributes.addAttribute("itemId", savedItem.getId());
    redirectAttributes.addAttribute("status", true);
    return "redirect:/basic/items/{itemId}";
}


<div class="container">
    <div class="py-5 text-center">
        <h2>상품 상세</h2>
    </div>
    <!-- 추가 -->
    <h2 th:if="${param.status}" th:text="'저장 완료!'"></h2>
</div> <!-- /container -->

  • th:if: 해당 조건이 참이면 실행
  • ${param.status}: 타임리프에서 쿼리 파라미터를 편리하게 조회하는 기능
    • 원래는 컨트롤러에서 모델에 직접 담고 값을 꺼내야 한다. 그런데 쿼리 파라미터는 자주 사용해서 타임리프에서 직접 지원한다.


  • if, unless (if의 반대)
<table border="1">
    <tr>
        <th>count</th>
        <th>username</th>
        <th>age</th>
    </tr>
    <tr th:each="user, userStat : ${users}">
        <td th:text="${userStat.count}">1</td>
        <td th:text="${user.username}">username</td>
        <td>
            <span th:text="${user.age}">0</span>
            <span th:text="'미성년자'" th:if="${user.age lt 20}"></span>
            <span th:text="'미성년자'" th:unless="${user.age ge 20}"></span>
        </td>
    </tr>
</table>

	<tr th:each="user, userStat : ${users}">
        <td th:text="${userStat.count}">1</td>
        <td th:text="${user.username}">username</td>
        <td th:switch="${user.age}">
            <span th:case="10">10살</span>
            <span th:case="20">20살</span>
            <span th:case="*">기타</span>
        </td>
    </tr>


텍스트 - text, utext


타임리프의 가장 기본 기능인 텍스트를 출력하는 기능 먼저 알아보자.


타임리프는 기본적으로 HTML 태그의 속성에 기능을 정의해서 동작한다. HTML의 콘텐츠(content)에 데이터를 출력할 때는 다음과 같이 th:text를 사용하면 된다.


<span th:text="${data}"></span>

<li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>

HTML 태그의 속성이 아니라 HTML 콘텐츠 영역 안에서 직접 데이터를 출력하고 싶으면 다음과 같이 [[...]]를 사용하면 된다.


컨텐츠 안에서 직접 출력하기 = [[${data}]]


Escape

HTML 문서는 <, > 같은 특수 문자를 기반으로 정의된다. 따라서 뷰 템플릿으로 HTML 화면을 생성할 때는 출력하는 데이터에 이러한 특수 문자가 있는 것을 주의해서 사용해야 한다.


HTML 엔티티

웹 브라우저는 <를 HTML 태그의 시작으로 인식한다. 따라서 <를 태그의 시작이 아니라 문자로 표현할 수 있는 방법이 필요한데(문자로 표현해서 <로 보이게 해준다), 이것을 HTML 엔티티라 한다. 그리고 이렇게 HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것을 이스케이프(escape)라 한다. 그리고 타임리프가 제공하는 th:text, [[...]]는 기본적으로 이스케이프(escape)를 제공한다.


Unescape

사실 이 예제에서 우리가 원했던 바다. 태그가 문자열로 보이는게 아니라 실제로 태그가 적용된 것을 원했다.


이스케이프 기능을 사용하지 않으려면 어떻게 해야할까?
타임리프는 다음 두 기능을 제공한다.


  • th:text th:utext
  • [[...]] [(...)]

이렇게 바꿔주면 된다.


th:inline="none"

타임리프는 [[...]]를 해석하기 때문에, 화면에 [[...]] 글자를 보여줄 수 없다. 이 태그 안에서는 타임리프가 해석하지 말라는 옵션이다.

 <li><span th:inline="none">[[...]] = </span>[[${data}]]</li>
 <li><span th:inline="none">[(...)] = </span>[(${data})]</li>

주의!


실제 서비스를 개발하다 보면 escape를 사용하지 않아서 HTML이 정상 렌더링 되지 않는 수많은 문제가 발생한다. (사용자가 이런 식으로 막 입력을 하는데, 이스케이프 처리를 하지 않으면 깨져보이는 문제가 발생한다)
escape를 기본으로 하고, 꼭 필요한 때만 unescape를 사용하자.


속성 값 설정

타임리프 태그 속성 (Attribute)
타임리프는 주로 HTML 태그에 th:* 속성을 지정하는 방식으로 동작한다. th:*로 속성을 적용하면 기존 속성을 대체한다. 기존 속성이 없으면 새로 만든다.


속성 설정

th:* 속성을 지정하면 타임리프는 기존 속성을 th:*로 지정한 속성으로 대체한다. 기존 속성이 없다면 새로 만든다.
<input type="text" name="mock" th:name="userA" />
타임리프 렌더링 후<input type="text" name="userA" />



속성 추가

- th:attrappend = <input type="text" class="text" th:attrappend="class=' large'"/><br/>
  • th:attrappend: 속성 값의 뒤에 값을 추가한다.
    • 기존의 클래스 속성 "text" 뒤에 " large"가 추가된다

- th:attrprepend = <input type="text" class="text" th:attrprepend="class='large '"/><br/>
  • th:attrprepend: 속성 값의 앞에 값을 추가한다
    • 기존의 클래스 속성 "text" 앞에 "large "가 추가된다

- th:classappend = <input type="text" class="text" th:classappend="large"/><br/>
  • th:classappend: class 속성에 자연스럽게 추가한다.
    • 띄어쓰기 신경스기 귀찮으니 알아서 text에 large를 더해준다. classappend는 띄어쓰기 안해줘도 됨.

checked 처리

HTML에서는 <input type="checkbox" name="active" checked="false" /> 이 경우에도 checked 속성이 있기 때문에 체크가 된다.
Why? HTML에서 checked 속성은 checked 속성의 값과 상관없이 checked라는 속성만 있어도 체크가 된다.


타임리프의 th:checked는 값이 false인 경우 checked 속성 자체를 제거한다.
<input type="checkbox" name="active" th:checked="false" />


타임리프 렌더링 후
<input type="checkbox" name="active" />


블록 - <th:block>


<th:block>은 HTML 태그가 아닌 타임리프의 유일한 자체 태그다.


/resources/templates/basic/block.html


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<th:block th:each="user : ${users}">
    <div>
        사용자 이름1 <span th:text="${user.username}"></span>
        사용자 나이1 <span th:text="${user.age}"></span>
    </div>
    <div>
        요약 <span th:text="${user.username} + ' / ' + ${user.age}"></span>
    </div>
</th:block>
</body>
</html>


지금까지는 아래와 같이 특정 태그의 속성으로 each를 사용했었다.

<div th:each="user : ${users}">
    사용자 이름: <span th:text="${user.username}"></span><br>
    사용자 나이: <span th:text="${user.age}"></span>
</div>

그런데 아래에 div 태그가 하나 더 있다면? 또 each로 루프를 돌려야 하는 번거로움이 있기 때문에, 타임리프에서 유일하게 block이라는 태그를 제공한다.


<th:block th:each="user : ${users}">
    <div>
        사용자 이름: <span th:text="${user.username}"></span>
    </div>
    <div>
        요약: <span th:text="${user.username} + ' / ' + ${user.age}"></span>
    </div>
</th:block>

태그의 속성 밖으로, 상위 레벨로 루프를 빼서 여러 하위 태그에서 객체를 사용할 수 있다.


타임리프 표현식


기본 표현식

타임리프는 다음과 같은 기본 표현식들을 제공한다. 지금부터 하나씩 알아보자.


• 간단한 표현:
  ◦ 변수 표현식: ${...}
  ◦ 선택 변수 표현식: *{...}
  ◦ 메시지 표현식: #{...}
  ◦ 링크 URL 표현식: @{...}
  ◦ 조각 표현식: ~{...}
• 리터럴
  ◦ 텍스트: 'one text', 'Another one!',…
  ◦ 숫자: 0, 34, 3.0, 12.3,…
  ◦ 불린: true, false
  ◦ 널: null
  ◦ 리터럴 토큰: one, sometext, main,…
• 문자 연산:
  ◦ 문자 합치기: +
  ◦ 리터럴 대체: |The name is ${name}|
• 산술 연산:
  ◦ Binary operators: +, -, *, /, %
  ◦ Minus sign (unary operator): -
• 불린 연산:
  ◦ Binary operators: and, or
  ◦ Boolean negation (unary operator): !, not
• 비교와 동등:
  ◦ 비교: >, <, >=, <= (gt, lt, ge, le)
  ◦ 동등 연산: ==, != (eq, ne)
• 조건 연산:
  ◦ If-then: (if) ? (then)
  ◦ If-then-else: (if) ? (then) : (else)
  ◦ Default: (value) ?: (defaultvalue)
• 특별한 토큰:
  ◦ No-Operation: _



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

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

  • @{...}: 타임리프는 URL 링크를 사용하는 경우 @{...}를 사용한다. 이것을 URL 링크 표현식이라 한다.
  • URL 링크 표현식을 사용하면 서블릿 컨텍스트를 자동으로 포함한다.
    • 과거에는 Application을 WAR로 빌드해서 외부 톰캣 서버에 띄웠다. 그래서 Application마다 서블릿 컨텍스트가 존재했었다. 이 때 이 Application의 서블릿 컨텍스트를 포함하는 듯.

리터럴 대체 - |...|

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


타임리프에서 문자와 표현식 등은 분리되어 있기 때문에 더해서 사용해야 한다.

<span th:text="'Welcome to our application, ' + ${user.name} + '!'">

다음과 같이 리터럴 대체 문법을 사용하면, 더하기 없이 템플릿 치환하듯이 편리하게 사용할 수 있다.

<span th:text="|Welcome to our application, ${user.name}!|">

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

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

  • 모델에 포함된 값이나, 타임리프 변수로 선언한 값을 조회할 수 있다.
    • (<tr th:each="item : ${items}">) 여기서 item이 타임리프 변수로 선언한 값이다.
  • 프로퍼티 접근법을 사용한다. (item.getPrice())

<ul>Object
 <li>${user.username} = <span th:text="${user.username}"></span></li>
 <li>${user['username']} = <span th:text="${user['username']}"></span></li>
 <li>${user.getUsername()} = <span th:text="${user.getUsername()}"></span></li>
</ul>
<ul>List
 <li>${users[0].username} = <span th:text="${users[0].username}"></span></li>
 <li>${users[0]['username']} = <span th:text="${users[0]['username']}"></span></li>
 <li>${users[0].getUsername()} = <span th:text="${users[0].getUsername()}"></span></li>
</ul>
<ul>Map
 <li>${userMap['userA'].username} = <span th:text="${userMap['userA'].username}"></span></li>
 <li>${userMap['userA']['username']} = <span th:text="${userMap['userA']['username']}"></span></li>
 <li>${userMap['userA'].getUsername()} = <span th:text="${userMap['userA'].getUsername()}"></span></li>
</ul>

Object


  • user.username: user의 username을 프로퍼티 접근 user.getUsername()
  • user[‘username’]: 위와 같음 user.getUsername()
  • user.getUsername(): user의 getUsername()을 직접 호출

List


  • users[0].username: List에서 첫 번째 회원을 찾고 username 프로퍼티 접근 list.get(0).getUsername()
  • users[0]['username']: 위와 같음
  • users[0].getUsername(): List에서 첫 번째 회원을 찾고 메서드 직접 호출

Map


  • userMap['userA'].username: Map에서 userA를 찾고, username 프로퍼티 접근 map.get("userA").getUsername()
  • userMap['userA']['username']: 위와 같음
  • userMap['userA'].getUsername(): Map에서 userA를 찾고 메서드 직접 호출

지역 변수 선언 - th:with

th:with를 사용하면 지역 변수를 선언해서 사용할 수 있다. 지역 변수는 선언한 태그 안에서만 사용할 수 있다.


/resources/templates/basic/variable.html 추가


<h1>지역 변수 - (th:with)</h1>
<div th:with="first=${users[0]}">
	<p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>
</div>


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


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

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

예)

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



 <li><a th:href="@{/hello}">basic url</a></li>
 <li><a th:href="@{/hello(param1=${param1}, param2=${param2})}">hello query param</a></li>
 <li><a th:href="@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}">path variable</a></li>
 <li><a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}">path variable + query parameter</a></li>

단순한 URL

  • @{/hello} /hello

쿼리 파라미터

  • @{/hello(param1=${param1}, param2=${param2})}
    • /hello?param1=data1&param2=data2
    • ()에 있는 부분은 쿼리 파라미터로 처리된다.

경로 변수

  • @{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}
    • /hello/data1/data2
    • URL 경로상에 변수가 있으면 () 부분은 경로 변수로 처리된다.

경로 변수 + 쿼리 파라미터

  • @{/hello/{param1}(param1=${param1}, param2=${param2})}
    • /hello/data1?param2=data2
    • 경로 변수와 쿼리 파라미터를 함께 사용할 수 있다.


URL 링크 간단히

th:href="@{|/basic/items/${item.id}|}"
  • 상품 이름을 선택하는 링크를 확인해보자.
  • 리터럴 대체 문법을 활용해서 간단히 사용할 수도 있다.

그냥 경로를 치환해야한다? @{를 떠올리자

  • 문자열 안에서 치환 ‘@{
    • th:onclick="|location.href='@{/basic/items}'|"
  • 바로 치환 th:href="@{|/basic/items/${item.id}|}"

타임리프 기본 객체

타임리프는 기본 객체들을 제공한다.


  • ${#request} - 스프링 부트 3.0부터 제공하지 않는다.
  • ${#response} - 스프링 부트 3.0부터 제공하지 않는다.
  • ${#session} - 스프링 부트 3.0부터 제공하지 않는다.
  • ${#servletContext} - 스프링 부트 3.0부터 제공하지 않는다.
  • ${#locale}

스프링 부트 3.0이라면 직접 model에 해당 객체를 추가해서 사용해야 한다.


그런데 #request는 HttpServletRequest 객체가 그대로 제공되기 때문에 데이터를 조회하려면 request.getParameter("data")처럼 불편하게 접근해야 한다.


이런 점을 해결하기 위해 편의 객체도 제공한다.


  • HTTP 요청 파라미터 접근: param
    예) ${param.paramData}
  • HTTP 세션 접근: session
    예) ${session.sessionData}
  • 스프링 빈 접근: @
    예) ${@helloBean.hello('Spring!')}

유틸리티 객체와 날짜


  • #message: 메시지, 국제화 처리
  • #uris: URI 이스케이프 지원
  • #dates: java.util.Date 서식 지원
  • #calendars: java.util.Calendar 서식 지원
  • #temporals: 자바 8 날짜 서식 지원
    • 사용 예시
@GetMapping("/date")
public String date(Model model) {
    model.addAttribute("localDateTime", LocalDateTime.now());
    return "basic/date";
}

<span th:text="${#temporals.format(localDateTime, 'yyyy-MM-dd HH:mm:ss')}"></span>


<ul>
 <li>default = 
	<span th:text="${localDateTime}"></span>
</li>
<li>yyyy-MM-dd HH:mm:ss = 
	<span th:text="${#temporals.format(localDateTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
</li>
</ul>
<h1>LocalDateTime - Utils</h1>
<ul>
 <li>${#temporals.day(localDateTime)} = <span th:text="${#temporals.day(localDateTime)}"></span></li>
 <li>${#temporals.month(localDateTime)} = <span th:text="${#temporals.month(localDateTime)}"></span></li>
 <li>${#temporals.monthName(localDateTime)} = <span th:text="${#temporals.monthName(localDateTime)}"></span></li>
 <li>${#temporals.monthNameShort(localDateTime)} = <span th:text="${#temporals.monthNameShort(localDateTime)}"></span></li>
 <li>${#temporals.year(localDateTime)} = <span th:text="${#temporals.year(localDateTime)}"></span></li>
 <li>${#temporals.dayOfWeek(localDateTime)} = <span th:text="${#temporals.dayOfWeek(localDateTime)}"></span></li>
 <li>${#temporals.dayOfWeekName(localDateTime)} = <span th:text="${#temporals.dayOfWeekName(localDateTime)}"></span></li>
 <li>${#temporals.dayOfWeekNameShort(localDateTime)} = <span th:text="${#temporals.dayOfWeekNameShort(localDateTime)}"></span></li>
 <li>${#temporals.hour(localDateTime)} = <span th:text="${#temporals.hour(localDateTime)}"></span></li>
 <li>${#temporals.minute(localDateTime)} = <span th:text="${#temporals.minute(localDateTime)}"></span></li>
 <li>${#temporals.second(localDateTime)} = <span th:text="${#temporals.second(localDateTime)}"></span></li>
 <li>${#temporals.nanosecond(localDateTime)} = <span th:text="${#temporals.nanosecond(localDateTime)}"></span></li>


  • #numbers: 숫자 서식 지원
  • #strings: 문자 관련 편의 기능
  • #objects: 객체 관련 기능 제공
  • #bools: boolean 관련 기능 제공
  • #arrays: 배열 관련 기능 제공
  • #lists, #sets, #maps: 컬렉션 관련 기능 제공
  • #ids: 아이디 처리 관련 기능 제공, 뒤에서 설명

리터럴

리터럴은 소스 코드상에 고정된 값을 말하는 용어이다.
타임리프는 다음과 같은 리터럴이 있다.


  • 문자: 'hello'
  • 숫자: 10
  • 불린: true, false
  • null: null

타임리프에서 문자 리터럴은 항상 ' (작은 따옴표)로 감싸야 한다.
<span th:text="'hello'"></span>


그런데 문자를 항상 '로 감싸는 것은 너무 귀찮은 일이다.
공백 없이 쭉 이어진다면 하나의 의미있는 토큰으로 인지해서 다음과 같이 작은 따옴표를 생략할 수 있다.
룰: A-Z, a-z, 0-9, [ ], ., -, _


<span th:text="hello"></span>


오류
<span th:text="hello world!"></span>
문자 리터럴은 원칙상 '로 감싸야 한다. 중간에 공백이 있어서 하나의 의미있는 토큰으로도 인식되지 않는다.


수정
<span th:text="'hello world!'"></span>
이렇게 '로 감싸면 정상 동작한다.



리터럴 대체 (Literal substitutions)

<span th:text="|hello ${data}|"></span>
마지막의 리터럴 대체 문법을 사용하면 마치 템플릿을 사용하는 것처럼 편리하다.


<h1>리터럴</h1>
<ul>
 <!--주의! 다음 주석을 풀면 예외가 발생함-->
 <!-- <li>"hello world!" = <span th:text="hello world!"></span></li>-->
 <li>'hello' + ' world!' = <span th:text="'hello' + ' world!'"></span></li>
 <li>'hello world!' = <span th:text="'hello world!'"></span></li>
 <li>'hello ' + ${data} = <span th:text="'hello ' + ${data}"></span></li>
 <li>리터럴 대체 |hello ${data}| = <span th:text="|hello ${data}|"></span></li>

연산

타임리프 연산은 자바와 크게 다르지 않다. HTML 안에서 사용하기 때문에 HTML 엔티티를 사용하는 부분만 주의하자.


 <li>10 + 2 = <span th:text="10 + 2"></span></li>
 <li>10 % 2 == 0 = <span th:text="10 % 2 == 0"></span></li>
 </ul>
 </li>
 <li>비교 연산
 <ul>
 <li>1 > 10 = <span th:text="1 > 10"></span></li>
 <li>1 gt 10 = <span th:text="1 gt 10"></span></li>
 <li>1 >= 10 = <span th:text="1 >= 10"></span></li>
 <li>1 ge 10 = <span th:text="1 ge 10"></span></li>
 <li>1 == 10 = <span th:text="1 == 10"></span></li>
 <li>1 != 10 = <span th:text="1 != 10"></span></li>
 </ul>
 </li>
 <li>조건식
 <ul>
 <li>(10 % 2 == 0) ? '짝수' : '홀수' = <span th:text="(10 % 2 == 0) ? '짝수' : '홀수'"></span></li>
 </ul>
 </li>
 <li>Elvis 연산자
 <ul>
 <li>${data} ?: '데이터가 없습니다.' = <span th:text="${data} ?: '데이터가 없습니다.'"></span></li>
 <li>${nullData} ?: '데이터가 없습니다.' = <span th:text="${nullData} ?: '데이터가 없습니다.'"></span></li>
 </ul>
 </li>
 <li>No-Operation
 <ul>
 <li>${data} ?: _ = <span th:text="${data} ?: _">데이터가 없습니다.</span></li>
 <li>${nullData} ?: _ = <span th:text="${nullData} ?: _">데이터가 없습니다.</span></li>

비교연산
HTML 엔티티를 사용해야 하는 부분을 주의하자.

  • > (gt), < (lt), >= (ge), <= (le), ! (not), == (eq), != (neq, ne)

조건식
자바의 조건식과 유사하다.


Elvis 연산자
조건식의 편의 버전


No-Operation
_인 경우 마치 타임리프가 실행되지 않는 것처럼 동작한다. 이것을 잘 사용하면 HTML의 내용 그대로 활용할 수 있다. 마지막 예를 보면 "데이터가 없습니다." 부분이 그대로 출력된다.


주석

<span th:text="${data}">html data</span>
<h1>1. 표준 HTML 주석</h1>
<!--
<span th:text="${data}">html data</span>
-->

<h1>2. 타임리프 파서 주석</h1>
<!--/* [[${data}]] */-->

<!--/*-->
<span th:text="${data}">html data</span>
<!--*/-->
<!--위 코드가 통으로 날라간다-->

<h1>3. 타임리프 프로토타입 주석</h1>
<!--/*/
<span th:text="${data}">html data</span>
/*/-->

결과


<h1>예시</h1>
<span>Spring!</span>
<h1>1. 표준 HTML 주석</h1>
<!--
<span th:text="${data}">html data</span>
-->
<h1>2. 타임리프 파서 주석</h1>
<h1>3. 타임리프 프로토타입 주석</h1>
<span>Spring!</span>

1. 표준 HTML 주석

자바스크립트의 표준 HTML 주석은 타임리프가 렌더링 하지 않고, 그대로 남겨둔다.


2. 타임리프 파서 주석

타임리프 파서 주석은 타임리프의 진짜 주석이다. 렌더링에서 주석 부분을 제거한다.


3. 타임리프 프로토타입 주석

타임리프 프로토타입은 약간 특이한데, HTML 주석에 약간의 구문을 더했다.
HTML 파일을 웹 브라우저에서 그대로 열어보면 HTML 주석이기 때문에 이 부분이 웹 브라우저가 렌더링하지 않는다. 타임리프 렌더링을 거치면 이 부분이 정상 렌더링 된다.
쉽게 이야기해서 HTML 파일을 그대로 열어보면 주석처리가 되지만, 타임리프를 렌더링한 경우에만 보이는 기능이다.


자바스크립트 인라인

타임리프는 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다.
자바스크립트 인라인 기능은 다음과 같이 적용하면 된다.
<script th:inline="javascript">



/resources/templates/basic/javascript.html


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- 자바스크립트 인라인 사용 전 -->
<script>
    var username = [[${user.username}]];
    // 이렇게 하면 안되고 "[[${user.username}]]"로 해야 한다.
    // 문자면 따옴표 해줘야 하고, 숫자면 빼야 하고,,, 이런거 챙기기 너무 어렵다.
    var age = [[${user.age}]];

    //자바스크립트 내추럴 템플릿
    var username2 = /*[[${user.username}]]*/ "test username";

    //객체
    var user = [[${user}]];
    // user 객체의 toString()이 호출된 결과가 들어간다.
</script>

<!-- 자바스크립트 인라인 사용 후 -->
<script th:inline="javascript">
    var username = [[${user.username}]];
    var age = [[${user.age}]];

    //자바스크립트 내추럴 템플릿
    var username2 = /*[[${user.username}]]*/ "test username";
    //  렌더링 할 때 test username 을 지우고 /**/ 사이의 값으로 렌더링해준다.

    //객체
    var user = [[${user}]];
    // 객체를 json 으로 바꿔서 넣어준다.
</script>
</body>
</html>

자바스크립트 인라인 사용 전 - 결과

<script>
var username = userA;
var age = 10;
//자바스크립트 내추럴 템플릿
var username2 = /*userA*/ "test username";
//객체
var user = BasicController.User(username=userA, age=10);
</script>

자바스크립트 인라인 사용 후 - 결과

<script>
var username = "userA";
var age = 10;
//자바스크립트 내추럴 템플릿
var username2 = "userA";
//객체
var user = {"username":"userA","age":10};
</script>

자바스크립트 인라인을 사용하지 않은 경우 어떤 문제들이 있는지 알아보고, 인라인을 사용하면 해당 문제들이 어떻게 해결되는지 확인해보자.



텍스트 렌더링
  • var username = [[${user.username}]];
    • 인라인 사용 전: var username = userA;
    • 인라인 사용 후: var username = "userA”;
  • 인라인 사용 전 렌더링 결과를 보면 userA라는 변수 이름이 그대로 남아있다. 타임리프 입장에서는 정확하게 렌더링 한 것이지만 아마 개발자가 기대한 것은 다음과 같은 "userA"라는 문자일 것이다. 결과적으로 userA가 변수 명으로 사용되어서 자바스크립트 오류가 발생한다. 다음으로 나오는 숫자 age의 경우에는 "가 필요 없기 때문에 정상 렌더링 된다.
  • 인라인 사용 후 렌더링 결과를 보면 문자 타입인 경우 "를 포함해준다. 추가로 자바스크립트에서 문제가 될 수 있는 문자가 포함되어 있으면 이스케이프 처리도 해준다. 예) ” “\"”

자바스크립트 내추럴 템플릿

타임리프는 HTML 파일을 직접 열어도 동작하는 내추럴 템플릿 기능을 제공한다.
자바스크립트 인라인 기능을 사용하면 주석을 활용해서 이 기능을 사용할 수 있다.


  • var username2 = /*[[${user.username}]]*/ "test username”;
    • 인라인 사용 전: var username2 = /*userA*/ "test username";
    • 인라인 사용 후: var username2 = "userA”;
  • 인라인 사용 전 결과를 보면 정말 순수하게 그대로 해석을 해버렸다. 따라서 내추럴 템플릿 기능이 동작하지 않고, 심지어 렌더링 내용이 주석처리 되어 버린다.
  • 인라인 사용 후 결과를 보면 주석 부분이 제거되고, 기대한 "userA"가 정확하게 적용된다.

객체

타임리프의 자바스크립트 인라인 기능을 사용하면 객체를 JSON으로 자동으로 변환해준다.



  • var user = [[${user}]];
    • 인라인 사용 전: var user = BasicController.User(username=userA, age=10);
    • 인라인 사용 후: var user = {"username":"userA","age":10};
  • 인라인 사용 전은 객체의 toString()이 호출된 값이다.
  • 인라인 사용 후는 객체를 JSON으로 변환해준다.

자바스크립트 인라인 each


자바스크립트 인라인은 each를 지원하는데, 다음과 같이 사용한다.


/resources/templates/basic/javascript.html에 추가

<!-- 자바스크립트 인라인 each -->
<script th:inline="javascript">
 [# th:each="user, stat : ${users}"]
 var user[[${stat.count}]] = [[${user}]];
 [/] 
</script>

자바스크립트 인라인 each 결과

<script>
var user1 = {"username":"userA","age":10};
var user2 = {"username":"userB","age":20};
var user3 = {"username":"userC","age":30};
</script>

템플릿 조각

웹 페이지를 개발할 때는 공통 영역이 많이 있다. 예를 들어서 상단 영역이나 하단 영역, 좌측 카테고리 등등 여러 페이지에서 함께 사용하는 영역들이 있다.
이런 부분을 코드를 복사해서 사용한다면 변경 시 여러 페이지를 다 수정해야 해서 상당히 비효율적이다.
타임리프는 이런 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원한다.



/resources/templates/template/fragment/footer.html


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<footer th:fragment="copy">
    푸터 자리 입니다.
</footer>
<footer th:fragment="copyParam (param1, param2)">
    <p>파라미터 자리 입니다.</p>
    <p th:text="${param1}"></p>
    <p th:text="${param2}"></p>
</footer>
</body>
</html>

th:fragment가 있는 태그는 다른 곳에 포함되는 코드 조각으로 이해하면 된다.


/resources/templates/template/fragment/fragmentMain.html


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>부분 포함</h1>
<h2>부분 포함 insert</h2>
<div th:insert="~{template/fragment/footer :: copy}"></div>
<!-- footer의 copy를 불러온다-->
<!-- div 안에 Insert-->

<h2>부분 포함 replace</h2>
<div th:replace="~{template/fragment/footer :: copy}"></div>
<!-- div 태그 자체를 교체한다-->

<h2>부분 포함 단순 표현식</h2>
<div th:replace="template/fragment/footer :: copy"></div>

<h1>파라미터 사용</h1>
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>
</body>
</html>

템플릿 조각 설명


  • template/fragment/footer :: copy: template/fragment/footer.html 템플릿에 있는 th:fragment="copy"라는 부분을 템플릿 조각으로 가져와서 사용한다는 의미이다.

부분 포함 insert


<div th:insert="~{template/fragment/footer :: copy}"></div>


<h2>부분 포함 insert</h2>
<div>
<footer>
푸터 자리 입니다.
</footer>
</div>

th:insert를 사용하면 현재 태그 (div) 내부에 추가한다.


부분 포함 replace


<div th:replace="~{template/fragment/footer :: copy}"></div>


<h2>부분 포함 replace</h2>
<footer>
푸터 자리 입니다.
</footer>

th:replace를 사용하면 현재 태그 (div)를 대체한다.


부분 포함 단순 표현식


<div th:replace="template/fragment/footer :: copy"></div>


<h2>부분 포함 단순 표현식</h2>
<footer>
푸터 자리 입니다.
</footer>

~{...}를 사용하는 것이 원칙이지만 템플릿 조각을 사용하는 코드가 단순하면 이 부분을 생략할 수 있다. 복잡할 때는 이렇게 못쓴다.


파라미터 사용


<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>


<h1>파라미터 사용</h1>
<footer>
 <p>파라미터 자리 입니다.</p>
 <p>데이터1</p>
 <p>데이터2</p>
</footer>

footer.html의 copyParam 부분


<footer th:fragment="copyParam (param1, param2)">
 <p>파라미터 자리 입니다.</p>
 <p th:text="${param1}"></p>
 <p th:text="${param2}"></p>
</footer>

템플릿 레이아웃



이전에 일부 코드 조각을 가지고와서 사용했다면, 이번에는 개념을 더 확장해서 코드 조각을 레이아웃에 넘겨서 사용하는 방법에 대해서 알아보자.


예를 들어서 <head>에 공통으로 사용하는 CSS, JavaScript 같은 정보들이 있는데, 이러한 공통 정보들을 한 곳에 모아두고, 공통으로 사용하지만 각 페이지마다 필요한 정보를 더 추가해서 사용하고 싶다면 다음과 같이 사용하면 된다.



/resources/templates/template/layout/base.html


<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
 <title th:replace="${title}">레이아웃 타이틀</title>
 <!-- 공통 -->
 <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">
 <link rel="shortcut icon" th:href="@{/images/favicon.ico}">
 <script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>
 <!-- 추가 -->
 <th:block th:replace="${links}" />
</head>

/resources/templates/template/layout/layoutMain.html


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="template/layout/base :: common_header(~{::title},~{::link})">
    <!--    common header의 title에 <title>메인타이틀</title> 자체가 넘어가버린다.-->
    <!--    base에 title이 넘어가서 base의 th:replace에 title 부분이 메인타이틀로 교체되어버린다.-->
    <!--    레이아웃이 있고, 원하는 부분만 바꿔치기 해준다고 생각하면 된다.-->
    <title>메인 타이틀</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
    <!--    css도 마찬가지로 link 태그를 따라 base로 넘어간다-->
</head>
<body>
메인 컨텐츠
</body>
</html>

생성 결과


<!DOCTYPE html>
<html>
<head>
<title>메인 타이틀</title>
<!-- 공통 -->
<link rel="stylesheet" type="text/css" media="all" href="/css/awesomeapp.css">
<link rel="shortcut icon" href="/images/favicon.ico">
<script type="text/javascript" src="/sh/scripts/codebase.js"></script>
<!-- 추가 -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/themes/smoothness/jquery-ui.css">
</head>
<body>
메인 컨텐츠
</body>
</html>

  • common_header(~{::title},~{::link}) 부분이 핵심이다.
    • ::title은 현재 페이지의 <title> 태그들을 전달한다.
    • ::link는 현재 페이지의 <link> 태그들을 전달한다.

결과를 보면

  • 메인 타이틀이 전달한 부분으로 교체되었다.
  • 공통 부분은 그대로 유지되고, 추가 부분에 전달한 <link>들이 포함된 것을 확인할 수 있다.

이 방식은 사실 앞서 배운 코드 조각을 조금 더 적극적으로 사용하는 방식이다.
쉽게 이야기해서 레이아웃 개념을 두고, 그 레이아웃에 필요한 코드 조각을 전달해서 완성하는 것으로 이해하면 된다.


템플릿 레이아웃 확장


앞서 이야기한 개념을 <head> 정도에만 적용하는게 아니라 <html> 전체에 적용할 수도 있다.

@GetMapping("/layoutExtend")
public String layoutExtends() {
    return "template/layoutExtend/layoutExtendMain";
}

/resources/templates/template/layoutExtend/layoutFile.html


<!DOCTYPE html>
<html th:fragment="layout (title, content)" xmlns:th="http://www.thymeleaf.org">
<head>
 <title th:replace="${title}">레이아웃 타이틀</title>
</head>
<body>
<h1>레이아웃 H1</h1>
<div th:replace="${content}">
 <p>레이아웃 컨텐츠</p>
</div>
<footer>
 레이아웃 푸터
</footer>
</body>
</html>

/resources/templates/template/layoutExtend/layoutExtendMain.html


<!DOCTYPE html>
<html th:replace="~{template/layoutExtend/layoutFile :: layout(~{::title}, ~{::section})}"
 xmlns:th="http://www.thymeleaf.org">
<head>
 <title>메인 페이지 타이틀</title>
</head>
<body>
<section>
 <p>메인 페이지 컨텐츠</p>
 <div>메인 페이지 포함 내용</div>
</section>
</body>
</html>

생성 결과


<!DOCTYPE html>
<html>
<head>
<title>메인 페이지 타이틀</title>
</head>
<body>
<h1>레이아웃 H1</h1>
<section>
<p>메인 페이지 컨텐츠</p>
<div>메인 페이지 포함 내용</div>
</section>
<footer>
레이아웃 푸터
</footer>
</body>
</html>

layoutFile.html을 보면 기본 레이아웃을 가지고 있는데, <html>에 th:fragment 속성이 정의되어 있다.
이 레이아웃 파일을 기본으로 하고 여기에 필요한 내용을 전달해서 부분부분 변경하는 것으로 이해하면 된다.
layoutExtendMain.html은 현재 페이지인데, <html> 자체를 th:replace를 사용해서 변경하는 것을 확인할 수 있다.
결국 layoutFile.html에 필요한 내용을 전달하면서 <html> 자체를 layoutFile.html로 변경한다.


입력 폼 처리

th:object

커맨드 객체를 지정한다.



*{...}: 선택 변수 식

*{...}: 선택 변수 식이라고 한다. th:object에서 선택한 객체에 접근한다.


th:field


HTML 태그의 id, name, value 속성을 자동으로 처리해준다.


렌더링 전

<input type="text" th:field="*{itemName}" />

렌더링 후

<input type="text" id="itemName" name="itemName" th:value="*{itemName}" />


등록 폼


th:object를 적용하려면 먼저 해당 오브젝트 정보를 넘겨주어야 한다. 등록 폼이기 때문에 데이터가 비어있는 빈 오브젝트를 만들어서 뷰에 전달하자.

@GetMapping("/add")
public String addForm(Model model) {
    model.addAttribute("item", new Item());
    return "form/addForm";
}


form/addForm.html 변경 코드 부분

<form action="item.html" th:action th:object="${item}" method="post">
    <div>
        <label for="itemName">상품명</label>
        <input type="text" id="itemName" th:field="*{itemName}" class="formcontrol" placeholder="이름을 입력하세요">
    </div>
    <div>
        <label for="price">가격</label>
        <input type="text" id="price" th:field="*{price}" class="form-control" placeholder="가격을 입력하세요">
    </div>
    <div>
        <label for="quantity">수량</label>
        <input type="text" id="quantity" th:field="*{quantity}" class="formcontrol" placeholder="수량을 입력하세요">
    </div>
</form>

  • th:object="${item}":
    • <form>에서 사용할 객체를 지정한다. 선택 변수 식 (*{...})을 적용할 수 있다.
  • th:field="*{itemName}":
    • *{itemName}는 선택 변수 식을 사용했는데, ${item.itemName}과 같다. 앞서 th:object로 item을 선택했기 때문에 선택 변수 식을 적용할 수 있다.
  • th:field는 id, name, value 속성을 모두 자동으로 만들어준다.
    • id: th:field에서 지정한 변수 이름과 같다. id="itemName"
    • name: th:field에서 지정한 변수 이름과 같다. name="itemName"
    • value: th:field에서 지정한 변수의 값을 사용한다. value=""

참고로 해당 예제에서 id 속성을 제거해도 th:field가 자동으로 만들어준다.


오타에 대해 오류를 반환해주기 때문에 개발자가 오류를 발견하는데 도움을 준다는 이점도 있다.


렌더링 전


<input type="text" id="itemName" th:field="*{itemName}" class="form-control" placeholder="이름을 입력하세요">

렌더링 후


<input type="text" id="itemName" class="form-control" placeholder="이름을 입력하세요" name="itemName" value="">

체크 박스

단순 HTML 체크 박스


resources/templates/form/addForm.html 추가


<hr class="my-4">
<!-- single checkbox -->
<div>판매 여부</div>
<div>
    <div class="form-check">
        <input type="checkbox" id="open" name="open" class="form-check-input">
        <label for="open" class="form-check-label">판매 오픈</label>
    </div>
</div>

실행 로그

FormItemController : item.open=true // 체크 박스를 선택하는 경우
FormItemController : item.open=null // 체크 박스를 선택하지 않는 경우

체크 박스를 체크하면 HTML Form에서 open=on이라는 값이 넘어간다. 스프링은 on이라는 문자를 true 타입으로 변환해준다.
(스프링 타입 컨버터가 이 기능을 수행하는데, 뒤에서 설명한다.)


주의 - 체크 박스를 선택하지 않을 때
HTML에서 체크 박스를 선택하지 않고 폼을 전송하면 open이라는 필드 자체가 서버로 전송되지 않는다.


HTML checkbox는 선택이 안되면 클라이언트에서 서버로 값 자체를 보내지 않는다.
수정의 경우에는 상황에 따라서 이 방식이 문제가 될 수 있다.
사용자가 의도적으로 체크되어 있던 값을 체크를 해제해도 저장 시 아무 값도 넘어가지 않기 때문에,
서버 구현에 따라서 값을 변경하지 않을 수도 있다.


이런 문제를 해결하기 위해서 스프링 MVC는 약간의 트릭을 사용하는데, 히든 필드를 하나 만들어서, _open처럼 기존 체크 박스 이름 앞에 언더스코어(_)를 붙여서 전송하면 체크를 해제했다고 인식할 수 있다.
히든 필드는 항상 전송되기 때문에, 체크를 해제한 경우 여기에서 open은 전송되지 않고, _open만 전송되는데,
이 경우 스프링 MVC는 체크를 해제했다고 판단한다.


체크 해제를 인식하기 위한 히든 필드


<input type="hidden" name="_open" value="on"/>


기존 코드에 히든 필드 추가


<!-- single checkbox -->
<div>판매 여부</div>
<div>
    <div class="form-check">
        <input type="checkbox" id="open" name="open" class="form-check-input">
        <input type="hidden" name="_open" value="on"/> <!-- 히든 필드 추가 -->
        <label for="open" class="form-check-label">판매 오픈</label>
    </div>
</div>

실행 로그


FormItemController : item.open=true // 체크 박스를 선택하는 경우
FormItemController : item.open=false // 체크 박스를 선택하지 않는 경우

체크 박스 체크
open=on&_open=on
체크 박스를 체크하면 스프링 MVC가 open에 값이 있는 것을 확인하고 사용한다. 이때 _open은 무시한다.


체크 박스 미체크
_open=on
체크 박스를 체크하지 않으면 스프링 MVC가 _open만 있는 것을 확인하고, open의 값이 체크되지 않았다고 인식한다. 이 경우 서버에서 Boolean 타입을 찍어보면 결과가 null이 아니라 false인 것을 확인할 수 있다.


체크박스 - 타임리프


개발할 때마다 이렇게 히든 필드를 추가하는 것은 상당히 번거롭다. 타임리프가 제공하는 폼 기능을 사용하면 이런 부분을 자동으로 처리할 수 있다.


타임리프 - 체크 박스 코드 추가

<!-- single checkbox -->
<div>판매 여부</div>
<div>
    <div class="form-check">
        <input type="checkbox" id="open" th:field="*{open}" class="form-check-input">
        <label for="open" class="form-check-label">판매 오픈</label>
    </div>
</div>

체크 박스의 기존 코드를 제거하고 타임리프가 제공하는 체크 박스 코드로 변경하자.


타임리프 체크 박스 HTML 생성 결과

<!-- single checkbox -->
<div>판매 여부</div>
<div>
    <div class="form-check">
        <input type="checkbox" id="open" class="form-check-input" name="open" value="true">
        <input type="hidden" name="_open" value="on"/>
        <label for="open" class="form-check-label">판매 오픈</label>
    </div>
</div>

<input type="hidden" name="_open" value="on"/>
타임리프를 사용하면 체크 박스의 히든 필드와 관련된 부분도 함께 해결해준다.
HTML 생성 결과를 보면 히든 필드 부분이 자동으로 생성되어 있다.


item.html


<!-- single checkbox -->
<div>판매 여부</div>
<div>
    <div class="form-check">
        <input type="checkbox" id="open" th:field="${item.open}" class="formcheck-input" disabled>
        <label for="open" class="form-check-label">판매 오픈</label>
    </div>
</div>

주의: item.html에는 th:object를 사용하지 않았기 때문에 th:field 부분에 ${item.open}으로 적어주어야 한다.
disabled를 사용해서 상품 상세에서는 체크 박스가 선택되지 않도록 했다.


HTML 생성 결과


<hr class="my-4">
<!-- single checkbox -->
<div class="form-check">
    <input type="checkbox" id="open" class="form-check-input" disabled name="open" value="true" checked="checked">
    <label for="open" class="form-check-label">판매 오픈</label>
</div>

타임리프의 체크 확인


checked="checked"


체크 박스에서 판매 여부를 선택해서 저장하면, 조회 시에 checked 속성이 추가된 것을 확인할 수 있다.
이런 부분을 개발자가 직접 처리하려면 상당히 번거롭다. 타임리프의 th:field를 사용하면, 값이 true인 경우 체크를 자동으로 처리해준다.


체크 박스 - 멀티

체크 박스를 멀티로 사용해서, 하나 이상을 체크할 수 있도록 해보자.


FormItemController - 추가


@ModelAttribute("regions")
public Map<String, String> regions() {
    Map<String, String> regions = new LinkedHashMap<>();
    regions.put("SEOUL", "서울");
    regions.put("BUSAN", "부산");
    regions.put("JEJU", "제주");
    return regions;
}

@ModelAttribute의 특별한 사용법


등록 폼, 상세화면, 수정 폼에서 모두 서울, 부산, 제주라는 체크 박스를 반복해서 보여주어야 한다.
이렇게 하려면 각각의 컨트롤러에서 model.addAttribute(...)를 사용해서 체크 박스를 구성하는 데이터를 반복해서 넣어주어야 한다.
@ModelAttribute는 이렇게 컨트롤러에 있는 별도의 메서드에 적용할 수 있다.
이렇게 하면 해당 컨트롤러를 요청할 때 regions에서 반환한 값이 자동으로 모델(model)에 담기게 된다.
물론 이렇게 사용하지 않고, 각각의 컨트롤러 메서드에서 모델에 직접 데이터를 담아서 처리해도 된다.


addForm.html - 추가


<!-- multi checkbox -->
<div>
    <div>등록 지역</div>
    <div th:each="region : ${regions}" class="form-check form-check-inline">
        <input type="checkbox" th:field="*{regions}" th:value="${region.key}" class="form-check-input">
        <label th:for="${#ids.prev('regions')}" th:text="${region.value}" class="form-check-label">서울</label>
    </div>
</div>

th:for="${#ids.prev('regions')}"
멀티 체크박스는 같은 이름의 여러 체크박스를 만들 수 있다. 그런데 문제는 이렇게 반복해서 HTML 태그를 생성할 때, 생성된 HTML 태그 속성에서 name은 같아도 되지만, id는 모두 달라야 한다.
따라서 타임리프는 체크박스를 each 루프 안에서 반복해서 만들 때 임의로 1, 2, 3 숫자를 뒤에 붙여준다.


each로 체크박스가 반복 생성된 결과 - id 뒤에 숫자가 추가

<input type="checkbox" value="SEOUL" class="form-check-input" id="regions1" name="regions">
<input type="checkbox" value="BUSAN" class="form-check-input" id="regions2" name="regions">
<input type="checkbox" value="JEJU" class="form-check-input" id="regions3" name="regions">

HTML의 id 가 타임리프에 의해 동적으로 만들어지기 때문에 <label for="id 값">으로 label 의 대상이 되는 id 값을 임의로 지정하는 것은 곤란하다. 타임리프는 ids.prev(...) , ids.next(...) 을 제공해서 동적으로 생성되는 id 값을 사용할 수 있도록 한다.


라디오 버튼

라디오 버튼은 여러 선택지 중에 하나를 선택할 때 사용할 수 있다.
이번 시간에는 라디오 버튼을 자바 ENUM을 활용해서 개발해보자.


@ModelAttribute("itemTypes")
public ItemType[] itemTypes() {
    return ItemType.values();
}

itemTypes 를 등록 폼, 조회, 수정 폼에서 모두 사용하므로 @ModelAttribute 의 특별한 사용법을 적용하자. ItemType.values() 를 사용하면 해당 ENUM의 모든 정보를 배열로 반환한다. 예) [BOOK, FOOD, ETC]


addForm.html - 추가


<!-- radio button -->
<div>
    <div>상품 종류</div>
    <div th:each="type : ${itemTypes}" class="form-check form-check-inline">
        <input type="radio" th:field="*{itemType}" th:value="${type.name()}" class="form-check-input">
        <label th:for="${#ids.prev('itemType')}" th:text="${type.description}" class="form-check-label">
            BOOK
        </label>
    </div>
</div>

실행 결과, 폼 전송

itemType=FOOD // 음식 선택, 선택하지 않으면 아무 값도 넘어가지 않음

체크 박스는 수정 시 체크를 해제하면 아무 값도 넘어가지 않기 때문에, 별도의 히든 필드로 이런 문제를 해결했다. 라디오 버튼은 이미 선택이 되어 있다면, 수정 시에도 항상 하나를 선택하도록 되어 있으므로 체크 박스와 달리 별도의 히든 필드를 사용할 필요가 없다.


타임리프에서 ENUM 직접 사용하기


이렇게 모델에 ENUM을 담아서 전달하는 대신에 타임리프는 자바 객체에 직접 접근할 수 있다.

@ModelAttribute("itemTypes")
public ItemType[] itemTypes() {
    return ItemType.values();
}

타임리프에서 ENUM 직접 접근

<div th:each="type : ${T(hello.itemservice.domain.item.ItemType).values()}">

${T(hello.itemservice.domain.item.ItemType).values()} 스프링EL 문법으로 ENUM을 직접 사용할 수 있다. ENUM에 values()를 호출하면 해당 ENUM의 모든 정보가 배열로 반환된다.


그런데 이렇게 사용하면 ENUM의 패키지 위치가 변경되거나 할 때 자바 컴파일러가 타임리프까지 컴파일 오류를 잡을 수 없으므로 추천하지는 않는다.


셀렉트 박스


셀렉트 박스는 여러 선택지 중에 하나를 선택할 때 사용할 수 있다.
이번 시간에는 셀렉트 박스를 자바 객체를 활용해서 개발해보자.


FormItemController - 추가

@ModelAttribute("deliveryCodes")
public List<DeliveryCode> deliveryCodes() {
    List<DeliveryCode> deliveryCodes = new ArrayList<>();
    deliveryCodes.add(new DeliveryCode("FAST", "빠른 배송"));
    deliveryCodes.add(new DeliveryCode("NORMAL", "일반 배송"));
    deliveryCodes.add(new DeliveryCode("SLOW", "느린 배송"));
    return deliveryCodes;
}


addForm.html - 추가

<!-- SELECT -->
<div>
    <div>배송 방식</div>
    <select th:field="*{deliveryCode}" class="form-select">
        <option value="">==배송 방식 선택==</option>
        <option th:each="deliveryCode : ${deliveryCodes}" th:value="${deliveryCode.code}" th:text="${deliveryCode.displayName}">FAST</option>
    </select>
</div>
<hr class="my-4">

타임리프로 생성된 HTML

<!-- SELECT -->
<div>
    <div>배송 방식</div>
    <select class="form-select" id="deliveryCode" name="deliveryCode">
        <option value="">==배송 방식 선택==</option>
        <option value="FAST">빠른 배송</option>
        <option value="NORMAL">일반 배송</option>
        <option value="SLOW">느린 배송</option>
    </select>
</div>
<hr class="my-4">

메시지


예를 들어서 messages.properties라는 메시지 관리용 파일을 만들고


item=상품
item.id=상품 ID
item.itemName=상품명
item.price=가격
item.quantity=수량

각 HTML들은 다음과 같이 해당 데이터를 key 값으로 불러서 사용하는 것이다

addForm.html

<label for="itemName" th:text="#{item.itemName}"></label>

editForm.html

<label for="itemName" th:text="#{item.itemName}"></label>

국제화


국제화

메시지에서 한 발 더 나가보자. 메시지에서 설명한 메시지 파일(messages.properties)을 각 나라별로 별도로 관리하면 서비스를 국제화할 수 있다. 예를 들어서 다음과 같이 2개의 파일을 만들어서 분류한다.


  • messages_en.properties
    item=Item
item.id=Item ID
item.itemName=Item Name
item.price=price
item.quantity=quantity
  • messages_ko.properties
    item=상품
item.id=상품 ID
item.itemName=상품명
item.price=가격
item.quantity=수량


타임리프 메시지 적용

타임리프의 메시지 표현식 #{...}를 사용하면 스프링의 메시지를 편리하게 조회할 수 있다. 예를 들어서 "방금 등록한 상품"이라는 이름을 조회하려면 #{label.item}이라고 하면 된다.


  • 렌더링 전 
    <div th:text="#{label.item}"></h2>
  • 렌더링 후 
    <div>상품</h2>

메시지에 파라미터

참고로 파라미터는 다음과 같이 사용할 수 있다.


hello.name=안녕 {0}


<p th:text="#{hello.name(${item.itemName})}"></p>

 

Ref) 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술

'Spring > MVC' 카테고리의 다른 글

[Spring/MVC] 12. Bean Validation  (0) 2025.01.19
[Spring/MVC] 11. Validation  (0) 2025.01.19
[Spring/MVC] 10. 메시지 국제화  (0) 2025.01.19
[Spring/MVC] 09. 타임리프 - 스프링 통합과 폼  (0) 2024.12.28
[Spring MVC] 08. 타임리프 기본기능  (0) 2024.12.27

'Spring/MVC'의 다른글

  • 현재글[Spring MVC] 타임리프 문법 정리

관련글

티스토리툴바