Thymeleaf(inline, classappend), sequence

th:inline = "javascript"

 

- script 태그에 작성하는 속성
- 타임리프 문법으로 출력된 내용/값을 JS에 알맞는 타입으로 변환

 

<h3 id="message"></h3>
<h3 id="num1"></h3> <!-- num1 숫자 1000이 뜨도록 -->
<script th:inline="javascript">
    //JS Inline
    //html 파일 실행시 js 내부 타임리프 코드 오류를 발생하지 않도록 함
    // + html 문법 오류 해결
    const message = "message값";/* ${message}*/
    document.querySelector("#message").innerText = message;

    const num1 = 1000;
    document.querySelector("#num1").innerText = num1;

</script>

 

@GetMapping("ex5")
public String ex5(Model model) {
    //message 값으로 전달할 값 작성하기
    model.addAttribute("message", "타임리프 + JS 사용 예제");

}

 

결과

 

 

th:classappend
 - 요소에 class 속성 값을 동적으로 추가

<h4 th:classappend="red">th(타임리프)에서 제공하는 class(스타일태그) append(추가)</h4>
<h4 th:classappend="green">초록색 색상 태그 실행 중</h4>
<h4 class="red "th:classappend="deco">class랑 classappend 같이 쓰기</h4>
<!-- class와 classappend가 모두 적용됨. 마지막에 작성해준 게 적용됨 -->
<h4 class="green" th:classappend="deco">초록 글씨에 밑줄 치기</h4>

 

각 class에 css 지정 후 결과

 

 

안전 탐색 연산자 : ${객체?.필드}

  - 객체가 null인지 판단 후 null이 아닌 경우 수행
  ex) 타임리프로 작성한 변수명이 controller에서 이름이 다르거나 존재하지 않으면 에러발생
  -> 안전 탐색 연산자를 사용하면 에러 발생을 방지 가능

<h4 th:text="${std?.studentNo}">학번</h4>
<!-- Controller에 해당하는 값이 있으면 보여주고 아니면 에러없이 넘어감 -->
<!-- std로 이름이 존재하면 이름이 보이게 설정 -->
<h4 th:text="${std?.name}" >이름</h4>
<h4 th:text="${mem?.memberNo}"></h4>
<h4 th:text="${mem?.name}"></h4>
<h4 th:text="${mem?.age}"></h4>

 

@GetMapping("ex5")
public String ex5(Model model) {

    StudentDTO std = new StudentDTO();
    std.setStudentNo("2222");		
    std.setName("김옥자");
    model.addAttribute("std",std);

    MemberDTO mem = new MemberDTO();
    mem.setMemberNo(1);
    mem.setName("김상호");
    mem.setAge(20);
    model.addAttribute("mem",mem);
    return "example/ex5";
}

결과 출력

 

번호를 자동으로 만들기 sequence

  - 시작부터 끝까지 번호로만 이루어진 숫자 배열 생성
  - 사용법
    ${#numbers.sequence(시작, 끝 [, step])} : 번호 발생기

  ex)1부터 5까지 출력하기
  ${#numbers.sequence(1, 5)} 

  - 타임리프 반복문(th:each)는 향상된 for문으로, 일반 for문의 동작을 못하기 때문에
  이를 해결하기 위해 sequence를 사용
  - 일반 for문(시작부터 끝까지 일정 간격만큼 증가해서 반복)

  * th:text에 변수 이외 글자를 넣길 원한다면 "|텍스트와 변수명|" 작성

 

<ul>
    <li th:each="i : ${#numbers.sequence(11,20,2)}" 
    th:text="|테스트${i}|"></li>
</ul>
<!-- 

<li th:each="i : ${#numbers.sequence(11,20,2)}" 
                    숫자 반복 시작(시작할숫자, 한계점숫자, 1이외 다른 간격설정)

    th:text="|테스트${i}|"></li>
    i로 숫자를 전달 받고 th:text="${i}"안에 i값 전달
 -->

each-sequence 결과