thymeleaf 객체 바인딩

기본 문법

: ${key}

<h2 th:text="${memberInfo}"></h2>

인라인 스타일

(HTML 태그의 속성이 아닌 HTML 콘텐츠 영역 안에서 직접 데이터를 출력)

: [[${key}]]

<h2>[[${memberInfo}]]</h2>

thymeleaf 객체 속성 바인딩

1. 도트 연산자를 활용하여 변수(key) 작성

   <h3 th:text="${memberInfo.memberId}">변수</h3> 

   

2. 도트 연산자를 활용하여 메소드 호출문 작성

   <h3 th:text="${memberInfo.getMemberPw()}">메소드 호출문</h3>

   

3. 객체참조변수['속성명'] 작성

   <h3 th:text="${memberInfo['getMemberName']}"></h3>
   <h3 th:text="${memberInfo['memberName']}"></h3>

   

thymeleaf 주석 처리 방법

<!-- -->

<!-- <h2>[[${memberInfo.getMemberName()}]]</h2> -->

<!--/* */-->

<!--/* <h2>[[${memberInfo.getMemberName()}]]</h2> */-->

지역변수

선언한 태그 안에서만 사용 가능한 지역변수를 지정할 수 있다.

th:with

<div th:with="memberName=${memberInfo.memberName}
              ,memberPhone=${memberInfo.memberPhone}">
	<h3 th:text="${memberPhone}"></h3>
	<h3 th:text="${memberName}"></h3>
</div>

thymeleaf 이스케이프 🆚 un이스케이프

• 이스케이프 : html에서 사용되는 특수문자를 html 엔티티로 변경하는 것

  <
>

th:text
[[...]]
  
  ❔ HTML 엔티티
  웹 브라우저는 <를 HTML 태그의 시작으로 인식 ➡️ < 를 태그의 시작이 아니라 문자로 표현할 수 있는 방법이 필요한데 이것을 HTML 엔티티라고 한다.

• 언이스케이프 : html에서 특정 캐릭터들이 예약되어 있기 때문에 표기의 혼란을 막기 위해서 사용하는 것 (이스케이프 기능을 사용하지 않겠다는 의미)

  <
>

th:utext
[(...)]

<--exam01.html-->
      
<h2>이스케이프 언이스케이프 비교1</h2>
  	<h3>&lt;i&gt;안녕히 가세요&lt;/i&gt;</h3>
	<h3><i>안녕히 가세요</i></h3>
    
<div th:with="hello=${'<b>안녕</b>하세요'}">
<h2>이스케이프 언이스케이프 비교2</h2>
	<h3 th:text="${hello}"></h3>
	<h3 th:utext="${hello}"></h3>
	<h3>[[${hello}]]</h3>
	<h3>[(${hello})]</h3>
</div>		

화면 출력 🔽

---

JS 스크립트에서 data 바인딩

th:inline="javascript"

	<script type="text/javascript" th:inline="javascript">
		const memberInfo1 = [[${memberInfo1}]];
		console.log('멤버1 정보: ', memberInfo1);
		
		for(let key in memberInfo1){ // for in으로 객체 순회
			console.log(`${key} : ${memberInfo1[key]}`);
		}
	</script>