스프링 부트 + Thymeleaf 정리하기(2)

프로젝트 셋팅 및 코드는 이전 글 내용을 참고한다.

 

Thymeleaf 연산자 정리하기

• Controller 부분

@GetMapping("/m4")
	public String m4(Model model) {
		int a = 10;
		int b = 3;
		model.addAttribute("a", a);
		model.addAttribute("b", b);
		return "m4";
}

• m4.html 
  
  • th:text 에서는 일종의 텍스트 느낌인데 ${ } 안쪽에 ' + ' 이런 스트링을 넣어도 되고 ${a} 이렇게 분리된 형식으로 넣어도 된다. 

<div>10 + 3 = 13</div>
<div><span th:text="${a}"></span> + <span th:text="${b}"></span> = <span th:text="${ a + b }"></span></div>
<div th:text="${a + ' + ' + b + ' = ' + ( a + b )}"></div>
<div th:text="${a} + ' + ' + ${b} + ' = ' + ${ a + b }"></div>

결과

• |   | 이건 th:text에서 문자열 취급을 시켜준다.
  • 위의 것과 다른 느낌이 있다면 의도적으로 ' '를 +에 씌워준 것과 다르게 내부에 있는 것을 문자열 처리 해주되 ${a}이런건 결과 기준으로 문자열화 해준다.

<div th:text="홍길동"></div>
<div th:text="|홍길동|"></div>
<div th:text="|${a}|"></div>
<!-- 이러면 || 안에 있는거 문자열로 취급한다. 템플릿 스트링 느낌 -->
<div th:text="|${a} + ${b} = ${a+b}|"></div>

결과

• 산술 연산자 
  • 문자열 처리화를 하지 않으면 "  "안쪽에서 연산자로 인식한다. 

<div th:text="${a} + ${b}"></div>
<div th:text="${a} - ${b}"></div>
<div th:text="${a} * ${b}"></div>
<div th:text="${a} / ${b}"></div>
<div th:text="${a} % ${b}"></div>

결과

• 비교 연산자
  • ${ }를 따로따로 쓰나, ${ }안에 다 처리하는거나 같다. 

<div th:text="${a > b}"></div>
<!-- 이방식으로 하나 아래 방식으로 하나 같다.  -->
<div> ---- </div> 
<div th:text="${a} > ${b}"></div>
<div th:text="${a} >= ${b}"></div>
<div th:text="${a} < ${b}"></div>
<div th:text="${a} <= ${b}"></div>
<div th:text="${a} == ${b}"></div>
<div th:text="${a} != ${b}"></div>

결과

• 논리 연산자

<div th:text="${a > 5} and  ${b < 10}"></div>
<div th:text="${a > 5} or  ${b < 10}"></div>
<div th:text="${a > 0} ? '양수' : '음수'"></div>
<div th:text="${a > 0 ? '양수' : '음수'}"></div>

결과

• 삼항연산자(말그대로 3항)
  • <span th:text="${data} ? ${data} : '데이터가 없음'"></span> 
  • data가 true면 data 출력, false면 데이터가 없음
• Elvis 연산자(2개 항이다.)
  • <span th:text="${data} ?: '데이터가 없음'"></span>
  • data가 true면 해당 값을 출력하고 false면 뒤에 있는 값을 치환하여 출력한다. 
• No-Operation(언더바 짝대기)
  • <span th:text="${data} ?: _">데이터가 없음</span> 
  • data가 true면 data가 false라면 HTML 내용 그대로를 출력한다. 
• Elvis나 No-Operation은 true면 자신 그대로가 나오는 형태이다. 

<!-- c는 여기서 정의되어 있지 않다. -->
<div th:text="${c} != null ? ${c} : '데이터가 없음'" ></div>
<div th:text="${c} ? ${c} : '데이터 없음'" ></div>
<div th:text="${c} ?: '데이터 없음'"></div> <!-- Elvis 연산자 -->
<!-- 위에 세개 다 똑같은 문장이다. 아래것만 기억하자 -->
<div th:text="${c} ?:_">데이터 없음</div><!-- No Operation -->

결과