[ 타임리프 ] 문법 정리 01

html에 th:속성(문법)=" ~ " , ${ }

${ } 는 java문법과 비슷한 환경을 제공

th: 와 ${ }를 java쪽에서 처리해서 html로 만들어 줄듯

th:replace=" ~ "

다른 템플릿 파일 포함 

<div th:replace="~{include/footer}"></div>

src / main / resources / templates 아래있는 include폴더에서 footer.html파일 가져와서 넣어줌

 

th:text="${ }"

해당 값을 text형식으로 넣어줌

<h1 th:text="${message}"></h1>

자바 컨트롤러쪽에서 model.addAttribute("message","Model addAttribute"); 일때

, <h1> Model addAttribute </h1> 으로 출력됨

 

[[ ${  } ]]

html일반 텍스트 자리에서 해당 값을 출력해줌

<div>
	[[${postWithOthers.investPost.content}]]
</div>

 

th:if="${ ~ }"

자바if문과 비슷, " ~ " 안이 true일떄만 코드로 존재, false면 코드상으로 존재x

th:if="${myInfo.profileImage != null}"
th:if="${myInfo.profileImage == null}"

 

${session.userNickName}

HttpSession에 저장된 값 이용할때

<span th:text="${session.userNickName}"></span>
th:if="${postWithOthers.investPost.userId == session.userId}"

자바쪽에서 아래와같이 HttpSession에 저장된 상황

HttpSession session = request.getSession();
session.setAttribute("userNickName", user.getNickName());

th:each=" a :  A "

A에 있는 값 하나씩 꺼내서, 해당태그 자체가 반복됨

<div th:each="postWithOthers : ${postList}" class="card mt-3">

th:href="@{ /path }"

타임리프에서 URL

// JSP에서
<a href="/individual-home-view?userId=${session.userId }" >

// 타임리프에서
<a th:href="@{/individual-home-view(userId=${session.userId})}" >

@{} 구문을 사용하여 URL을 생성하며, @{/path} 형식으로 작성
파라미터 쪽에서 ? 대신 ()

${ #dates.format(  , 'M월 d일 HH시') }

타임리프의 날짜 포맷팅 기능을 사용하여 날짜를 포맷

th:text="${#dates.format(postWithOthers.investPost.createdAt, 'M월 d일 HH시')}"

 

일반 HTML속성에 th를 붙이는 경우(  java에서 값 가져올때  )

data- 속성, id속성에

<a href="#" th:data-post-id="${postWithOthers.investPost.id }">
	<i th:id=" 'heartIcon-' + ${postWithOthers.investPost.id } " ></i>
</a>

src속성에

th:src="${myInfo.profileImage}"