[Thymeleaf] with 사용하기
- Web/Thymeleaf
- 2022. 3. 7.
thymeleaf, with 사용하기
with 사용하기
with는 변수의 선언이다.
String name = '몰랑피우' 처럼 thymeleaf에서 사용할 변수를 임의로 생성할 수 있다.
with의 사용 방법은 크게 2 가지 방법이 있다.
1) 기존 html 태그 안에 넣기.
2) th:block 태그를 생성하여 넣기.
이를 이렇게 나누는 이유는 with의 특이한 성질 때문이다.
html에서 <ol> 혹은 <ul> 하위 태그에는 <li>가 존재하는 것을 알 수 있다.
그리고 with는 자신의 하위 태그에만 선언된 변수를 사용할 수 있는 조건이 붙는다.
아래의 코드를 통해 예시를 들도록 하였다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>with 가져오기</title>
</head>
<body>
<h1>with 설명</h1>
<h3 style="color: blue">Stage 01</h3>
<th:block th:with="test='몰랑피우'">
<p th:text="${test}"></p>
</th:block>
<p th:text="${test}"></p>
<h3 style="color: blue">Stage 02</h3>
<div th:with="mollang='피우'">
<h4 th:text="${mollang}"></h4>
</div>
<h3 style="color: blue">Stage 03</h3>
<div th:with="ref01='몰랑', ref02='피우', ref03=10">
<h4 th:text="${ref01}"></h4>
<h4 th:text="${ref02}"></h4>
<h4 th:text="${ref03}"></h4>
</div>
</body>
</html>
- Stage 01 -
th:block을 통해 with를 선언하였다. test의 결과처럼 몰랑피우가 선언이 된다.
th:block밖의 test 변수는 html에 표시가 되지 않는다. with 선언된 태그의 하위 태그가 아니므로, html에 표시가 되지 않는다.
- Stage 02 -
th:with를 html에서 흔히 보이는 div에 선언을 하였다.div의 하위 태그에 속한 p태그에 test 변수가 선언된 것을 확인할 수 있다.
- Stage 03 -
th:with는 한 번에 복수개를 선언할 수 있다.문자는 작은따옴표, 숫자는 그냥 입력하면 된다.
만약에...
with에 대해 설명을 하였다.
여기서, Stage01을 설명하면서 의문을 갖게 되었다.
설명글처럼 with의 하위 태그에 선언되지 않는 변수는 결괏값에 표출되지 않는다.
이는 과연, html에 정말로 아무런 효과를 줄 수 없는 것일까?
이를 실험하기 위해서 위의 코드를 css를 삽입으로 실험을 하였다.
놀랍게도 아무것도 표현되지 않은 태그는 css가 적용되는 현상을 확인할 수 있었다.
이로써 알게 된 결론은, thymeleaf의 value 표현식의 문제로 태그가 html에 표기가 되지 않는 것일 뿐, 사실 상 web에서는 p태그가 표현되어 있었다.
따라서, 아무것도 없다고 해서 그냥 넘어갈 수 있지만 웹 디자인이 깨질 수 있으므로 반드시 체크하고 넘어가도록 조심해야 한다.
결과
thymeleaf와 가장 유사한 코드는 아무래도 JSTL인 듯하다.
그러나 한 번 선언으로 계속 쓸 수 있는 c:set과 다르게, 하위 태그라는 조건이 붙은 with의 사용은 조금 까다로울 수 있다.
이를 조심해서 사용하도록 신경을 많이 써야 할 듯하다.
'Web > Thymeleaf' 카테고리의 다른 글
| [Thymeleaf] template 기능 - replace (0) | 2022.03.23 |
|---|---|
| [Thymeleaf] for 사용하기 (2) | 2022.03.08 |
| [Thymeleaf] if - else 사용하기 (0) | 2022.03.08 |
| [Thymeleaf] Value 사용하기 (0) | 2022.03.07 |
| [Thymeleaf] Thymeleaf 사용하기 (0) | 2022.03.07 |