[FE] thymeleaf 간단 문법

이번 개인 프로젝트에서 thymeleaf를 사용하고 있고 thymeleaf의 문법을 어느정도는 알아야 수월히 진행될 수 있겠다 생각하여 공부 중이다.

Thymeleaf는 템플릿 엔진의 일종으로, html 태그에 속성을 추가해 페이지에 동적으로 값을 추가하거나 처리할 수 있게 해준다.

th:{}가 붙은 부분은 서버 사이드에서 렌더링 되어 기존의 것을 대체하고 없으면 {} 속성을 그대로 사용한다.

대부분의 html 속성은 th:{}로 변경할 수 있다.

자주 사용되는 문법

th:text

화면에 값을 출력한다.

<p th:text="'안녕하세요. ' + ${id}" >안 보이는 부분</p>
<span th:text="${name}"></span>

th:if

문자 그대로 if문이다. 해당 조건 만족 시 출력된다.

<div th:if="${move}">
  <p>로그인 페이지로 이동합니다.</p>
</div>

위 구문은 move가 true일 때만 보인다.

th:errors

해당 value에 에러가 있는 경우 출력한다.

<ul>
    <li th:errors="*{id}" />
    <li th:errors="*{name}" />
</ul>

form 태그에서 사용되는 문법

th:action

form 태그 사용 시 해당 경로로 요청을 보낸다. (url)

th:object

form을 submit할 때 form의 데이터가 해당 객체로 받아진다.

th:field

th:object로 설정해준 객체의 내부 필드들과 매핑된다. *{}로 써준다. th:field는 해당 태그의 id와 name을 자동 설정 해준다. th:field=*{hi} 라면 id="hi" name="hi" value="${hi}"로 채워진다.

<form th:action="@{/members/join}" th:object="${member}" method="post">
  <input type="text" th:field="*{name}" placeholder="이름">
  <input type="text" th:field="*{id}" placeholder="아이디">
  <input type="text" th:field="*{pw}" placeholder="비밀번호">
</form>

이 정도만 알고 있어도 훨씬 수월하게 진행된다.