[Thymeleaf] 타임리프 @{..}, |리터럴| 경로 설정, form th:action, img th:src 설정 문법

Thymeleaf를 통해 컨트롤러와 데이터를 주고받고 처리하는 과정을 공부하면서 th:action, th:src, thymeleaf 문법을 통해 객체 그래프 탐색 방법에 대해 정리하고자 합니다.

 

html 문서를 작성하면서 동적 프로그래밍이 필요할 때가 있습니다. 

이럴 때 타임리프 문법을 통해 쉽게 해결할 수 있습니다.

 

form

form 태그를 통해 컨트롤러에게 데이터 셋을 전달하여 데이터 처리를 요청할 수 있습니다.

 

th:action

✔️ form data를 보낼 url를 설정합니다.

✔️ 서버 Controller에게 데이터 처리 요청을 합니다.

<form th:action="@{/auth/loginProc}" method="post" class="login__form">
    <input type="text" name="username" placeholder="Username" required>
    <input type="password" name="password" placeholder="Password" required>
    <input type="submit" value="Log in">
</form>

 

@{URL 링크} 

✔️ @{URL 링크} : 타임리프는 URL 링크를 @{...} 에 담아서 전달합니다.

 

ex1)

th:href = "@{/css/style/.css}"

ex2)

th:href = "@{/user/{userId}(userId = ${user.id})}"

ex3)

th:href = "@{|/user/${userId}|}"

 

|리터럴|

✔️ 타임리프에서 문자와 표현식 등은 분리해서 작성해 주어야 합니다.

✔️ 리터럴 대체 문법을 사용하면, 더하기 없이 편리하게 사용할 수 있습니다.

 

ex1)

th:onclick="'location.href=' + '/'' + @{/product/add} + '/''"
th:onclick="|location.href='@{/product/add}'|"

 

${변수명} - 변수 표현식, 객체 그래프 탐색 가능

✔️ 컨트롤러에서 Model을 통해 전달한 값이나, 타임리프 변수로 선언한 값을 ${...}을 통해 조회할 수 있습니다.

✔️ Property 접근법을 통해 사용합니다.

<span th:text="${user.username}"></span>
<span th:text="${user.team.name}"></span>

// size()
<span th:text="${items.size()}"></span>

 

컨트롤러에서 model에 user 객체를 변수 "user"에 담아 전달하면

html 파일에서 타임리프 문법을 통해 객체 그래프 탐색을 진행할 수 있습니다.

user의 속성뿐만 아니라. user와 매핑된 엔티티의 정보도 조회할 수 있습니다.

 

${***. size()} 를 통해 전달받은 컬렉션 값의 크기를 구할 수도 있습니다.

 

img 경로 설정

th:src

th:src로 작성을 하면 resources/static 파일을 기준으로 파일을 찾습니다.

<img th:src="@{/images/phoneImage.png}" />