개발놀이터

타임리프기본1 본문

Spring/Spring

타임리프기본1

마늘냄새폴폴 2021. 10. 13. 00:15

본 포스트는 김영한님의 인프런강의 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술을 보고 정리한 포스트입니다. 자세한 내용은 강의를 참고해주세요

 

*기본 객체들
타임리프는 기복 객체들을 제공한다.
1. ${#request}
2. ${#response}
3. ${#sesison}
4. ${#servletContext}
5. ${#locale}

그런데 #request는 HttpServletRequest객체가 그대로 제공되기 때문에 데이터를 조회하려면 request.getParameter("data")처럼 불편하게 접근해야 한다.

이런 점을 해결하기 위해 편의 객체도 제공한다.

HTTP요청 파라미터 접근
${param.paramData}

HTTP세션 접근
${session.sessionData}

스프링 빈 접근
${@BeanName.hello('spring!')}


*URL링크
타임리프에서 URL을 생성할 때에는 @{...}문법을 사용하면 된다.  

@GetMapping("/link")
public String link(Model model) {
	model.addAttribute("param1", "data1");
	model.addAttribute("param2", "data2");
	return "basic/link";
}



단순한 URL
@{/hello} = /hello

쿼리 파라미터
@{/hello(param1 = ${param1}, param2 = ${param2}) = /hello?param1=data1&param2=data2

경로변수
@{/hello/{param1}/{param2}(param1 = ${param1}, param2 = ${param2})} = /hello/data1/data2

경로변수 + 쿼리 파라미터
@{/hello/{param1}(param1 = ${param1}, param2 = ${param2})} = /hello/data1?param2=data2


*리터럴
타임리프는 다음과 같은 리터럴이 있다. 
1. 문자 : 'hello'
2. 숫자 : 10
3. 불린 : true, false
4. null : null

타임리프에서 문자 리터럴은 항상 작은따옴표로 감싸야 한다. 
<span th:text=" 'hello' ">

그런데 문자를 항상 작은따옴표로 감싸는 것은 너무 귀찮은 일이다. 공백 없이 쭉 이어진다면 하나의 의미있는 토큰으로 인지해서 다음과 같이 작은 따옴표롤 생략할 수 있다.
룰 : A-Z, a-z, 0-9, [], .(점), -(하이폰), _(언더바)
<span th:text="hello_world">

cf) 리터럴 대체
<span th:text="|hello ${data}|">
마지막의 리터럴 대체 문법을 사용하면 마치 템플릿을 사용하는 것 처럼 편리하다. 


*연산
타임리프 연산은 자바와 크게 다르지 않다. HTML안에서 사용하기 때문에 HTML 엔티티를 사용하는 부분만 주의하면 된다. 

비교연산 : HTML엔티티를 사용해야 하는 부분을 주의
조건식 : 자바의 조건식과 유사하다. 
Elvis 연산자 : 조건식의 편의버전
No-Operation : _(언더바)인 경우 마치 타임리프가 실행되지 않는 것처럼 동작한다. 이것을 잘 이용하면 HTML의 내용 그대로 활용할 수 있다. 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>산술 연산
        <ul>
            <li>10 + 2 = <span th:text="10 + 2"></span></li>
            <li>10 % 2 == 0 = <span th:text="10 % 2 == 0"></span></li>
        </ul>
    </li>
    <li>비교 연산
        <ul>
            <li>1 > 10 = <span th:text="1 &gt; 10"></span></li>
            <li>1 gt 10 = <span th:text="1 gt 10"></span></li>
            <li>1 >= 10 = <span th:text="1 >= 10"></span></li>
            <li>1 ge 10 = <span th:text="1 ge 10"></span></li>
            <li>1 == 10 = <span th:text="1 == 10"></span></li>
            <li>1 != 10 = <span th:text="1 != 10"></span></li>
        </ul>
    </li>
    <li>조건식
        <ul>
            <li>(10 % 2 == 0)? '짝수':'홀수' = <span th:text="(10 % 2 == 0)?'짝수':'홀수'"></span></li>
        </ul>
    </li>
    <li>Elvis 연산자
        <ul>
            <li>${data}?: '데이터가 없습니다.' = <span th:text="${data}?: '데이터가없습니다.'"></span></li>
            <li>${nullData}?: '데이터가 없습니다.' = <span th:text="${nullData}?:'데이터가 없습니다.'"></span></li>
        </ul>
    </li>
    <li>No-Operation
        <ul>
            <li>${data}?: _ = <span th:text="${data}?: _">데이터가 없습니다.</
                span></li>
            <li>${nullData}?: _ = <span th:text="${nullData}?: _">데이터가없습니다.</span></li>
        </ul>
    </li>
</ul>
</body>
</html>




*속성 값 설정
타임리프는 주로 HTML태그에 th:* 속성을 지정하는 방식으로 동작한다. th:*로 속성을 적용하면 기존 속성을 대체한다. 기존 속성이 없으면 새로 만든다. 

cf) checked 처리
HTML에서는 <input type="checkbox" name="active" checked="false" /> 이 경우에도 checked속성이 있기 때문에 checked처리가 되어버린다. (true, false와는 상관X) 

HTML에서는 checked 속성은 checked속성의 값과 상관없이 checked라는 속성만 있어도 체크가 된다. 이런 부분이 true, false값을 주로 사용하는 개발자 입장에서는 불편하다.

타임리프의 th:checked는 값이 false인 경우 checked속성 자체를 제거한다. 
th:checked="${result}" 이런식으로 사용 가능

'Spring > Spring' 카테고리의 다른 글

타임리프심화1  (0) 2021.10.16
타임리프기본2  (0) 2021.10.15
스프링 dirty checking과 merge  (0) 2021.08.31
스프링 RedirectAttribute  (0) 2021.08.21
타임리프  (0) 2021.08.19
'Spring/Spring' Related Articles more