(TIL) 4/16 Thymleaf 속성
속성
- 태그
th:block: 가상 태그-
타임리프에서 제공하는 유일한 태그
-
th속성을 작성할 html 태그가 마땅히 존재하지 않을 때 사용
-
조건문, 반복문, 변수 바인딩 등 로직 처리용
-
가상태그 : HTML에 렌더링 되지 않음(안보임)
<!-- 출력 : productName : 종이컵 / 종이컵 --> <!-- html : productName : 종이컵 / <span> 종이컵 </span> --> productName : <th:block th:text="${productName}">상품명</th:block> / <span th:text="${productName}">상품명</span>
-
th:text: 태그 내용으로 출력 (단일 출력) (innerText)-
html 태그, 특수문자 해석 X
-
속성값을 태그의 내용(innerText)으로 출력
-
문자열 이어쓰기
- th:text="|문자열&|”```html <p th:text="|th:text의 str => ${str}|"></p> <!-- th:text의 str => <h1>테스트 중 × </h1> --> ```req.setAttribute("test1", "HttpServletRequest로 전달한 값");<!-- 출력 : HttpServletRequest로 전달한 값 --> <h4 th:text="${test1}">test1 값</h4>
-
th:utext: 태그 내용으로 출력 (단일 출력) (innerHTML)-
html 태그, 특수문자 해석 O
model.addAttribute("str", "<h1>테스트 중 × </h1>");<th:block th:utext="${str}">str</th:block> <!-- th:text <h1>테스트 중 × </h1> th:utext 테스트 중 × -->
-
th:each: 태그 내용으로 출력 (복수 출력)-
향상된 for 문 형태
-
인덱스번호로 요소 하나하나 접근해서 출력
-
th:each="변수명 : ${List 또는 배열}”
-
매 반복 시 마다 List 또는 배열의 요소를 차례대로 꺼내어
변수에 저장(변수명은 자유롭게 작성)<!-- each 사용 --> <th:block th:each="fruit : ${fruitList}"> <li th:text="${fruit}">과일명</li> </th:block> <!-- each 미사용 --> <li th:text="${fruitList[0]}">0번 인덱스 과일</li> <li th:text="${fruitList[1]}">1번 인덱스 과일</li> <li th:text="${fruitList[2]}">2번 인덱스 과일</li>
-
th:object: 자식 객체 경로 생략-
해당 태그 내에서 지정된 객체의 필드를 쉽게 접근할 수 있게 해주는 속성
<!-- std.studentNo, name, age --> <ul th:object="${std}"> <li th:text="*{studentNo}">학번</li> <li th:text="*{name}">이름</li> <li th:text="*{age}">나이</li> </ul>
-
th:href: a링크요청주소 동적으로 설정-
<a th:href="@{/board(key=${key}, query=${query})}">게시판(/board)</a> <!-- /board?key=제목&query=검색어 --> <a th:href="@{/example/ex3/{number}(number=${boardNo})}">/example/ex3/10</a> <!-- /example/ex3/10 -->
-
th:inline: 스크립트나 스타일 태그에서 EL 사용-
Thymeleaf에서 스크립트나 스타일 태그 안에서 EL 표현식을 쓸 수 있게 해주는 기능
-
/* */미사용 : HTML 단독 실행 시 오류 / 사용 : HTML 단독 실행해도 오류 X<script th:inline="javascript"> const userName = [[${user.name}]]; const userName = /*[[${user.name}]]*/ "이름"; </script>
-
th:classappend: 클래스 이름 추가<!-- class="red deco"-> red, deco --> <h4 class="red" th:classappend="deco">th:classappend 테스트 중...</h4>- 조건식
th:if: if문-
false면 아예 출력 안함
-
EL문에 ! 붙여서 부정문 가능
-
조건식에 작성된 값이 있으면 -> true
조건식에 작성된 값이 없으면 -> false<h4 th:if="${std}">std 있음!!!</h4> <!-- 있으면 출력 --> <h4 th:if="${!std}">std 없음...</h4> <!-- 없으면 출력 -->
-
th:unless: 부정 if문-
조건식에 작성된 값이 있으면 -> false
조건식에 작성된 값이 없으면 -> true<h4 th:unless="${std}">std 없음...</h4>
-
th:switch/th:case: switch 문<th:block th:switch="${num}"> <h3 th:case="100">100 이다~</h3> <h3 th:case="200">200 이다~</h3> <h3 th:case="300">300 이다~</h3> <!-- th:case="*" == default 나머지의 경우 --> <h3 th:case="*">나머지</h3> </th:block>
- 삼항 연산자
th: (조건식 ? 참인경우 : 거짓인경우): 삼항연산자<!-- 조건식 참 거짓 --> <h4 th:text="${std.age == 30} ? '서른' : '서른아님'">삼항연산자</h4>th: (값 ?: 값이 없을 때): Elvis 연산자(null 확인)-
삼항 연산자에서 조건식 자리에 값(변수)만 작성 (==, != 등의 연산자 사용 X)
-
왼쪽 값이 존재하면 해당 값을 출력, 없으면 우변을 출력
<p th:text="${std} ?: '회원데이터 없음'"></p>
-
th: (값 ?:_): No-Operation 연산자(null 확인, null이면 태그 출력)-
왼쪽 값이 없을 경우 타임리프 코드를 해석 X
-
타임리프 코드 해석 X
- 일반 HTML 태그로 동작
- HTML 태그 사이 내용이 화면에 출력<p th:text="${std} ?: _"> 학생 데이터 없음</p>
-
th: ${객체?.필드}: null 이면 수행 안함-
객체가 null인지 판단 후 null이 아닌 경우 수행
<p th:text="${std?.studentNo}">학번</p>
-
- 템플릿 재사용
th:fragment조각 정의<h1 th:fragment="footer2" style="background-color: yellow;"> 타임리프 fragment 조각 확인중 </h1> ---------------------------------------------------------------- <div> <ul> <li>공지사항</li> <li>자유게시판</li> <li>질문게시판</li> <li>FAQ</li> <li>1:1 문의</li> </ul> </div>th:replace조각 가져오기 (치환)<th:block th:replace="~{fragments/header}"></th:block> <th:block th:replace="~{fragments/footer :: footer2}"></th:block>
messages.properties
- 정의
- SpringBoot + Thymeleaf 환경에서 메시지 관리를 위해 사용하는 설정 파일
- 화면(view)에서 출력할 문자열, 값을 별도로 분리해서 저장하는 파일
- 경로 : src/main/resources/messages.properties (Spring boot가 자동인식)
- 형태
# messages.properties 파일 app.name=demoProject2 user.default.image=/images/cats/cat1.jpg<h3 th:text="#{app.name}">앱 이름</h3> <img th:src="#{user.default.image}"> <!-- demoProject2 (cat1 사진) -->
