Thymeleaf 타임리프 기본 기능 정리 [텍스트/변수/반복/속성]

Spring

Thymeleaf 타임리프 기본 기능 정리 [텍스트/변수/반복/속성]

DAHLIA CHOI 2021. 10. 15. 17:28

타임리프는 템플릿 엔진이다.

스프링을 사용하는 환경에서 유용하게 사용된다!

여기에서 프로젝트를 쉽게 만들 수 있기 때문에 이곳을 통해서 프로젝트는 생성하는 경우에는 Dependencies에 타임리프를 선택하면된다.

혹시 선택하지 않았다면 build.gradle에 들어가서

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}

dependencies안에 코드를 추가시켜 주면 될 것 같다!!

그럼 타임리프 개념을 정리해봐야겠다🙃

타임리프 (Thymeleaf)

타임리프는 서버 사이드 자바 템플릿 엔진이다.

◾ 서버 사이드 HTML 렌더링

백엔드 서버에서 HTML을 동적으로 렌더링 하는 용도이다.

◾ 내추럴 템플릿

타임리프는 HTML을 최대한 유지시키는 특징이 있다.
th를 사용해서 HTML 코드 안에 작성한다.
타임리프를 사용하면 파일 그대로 웹브라우저에 열어도 정상적인 HTML을 확인할 수 있다.
하지만 동적 결과는 렌더링 되지 않는다
순수 HTML을 그대로 유지하면서 뷰 템플릿을 사용할 수 있는 타임리프의 특징을 내추럴 템플릿이라고 한다.

◾ 스프링 통합 지원

타임리프는 HTML에 쓰기 때문에 HTML문에 타임리프를 선언해줘야 한다.

<html xmlns:th="http://www.thymeleaf.org">

[ 기본 표현식 ]

Tutorial: Using Thymeleaf

1 Introducing Thymeleaf 1.1 What is Thymeleaf? Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide a

www.thymeleaf.org

이 페이지에 들어가면 표현식 정리가 잘 되어있다!

[ 텍스트 ]

타임리프에서 텍스트를 사용하려면 th:text를 사용하면 된다.

<sapn th:text=${data}">

HTML 속성을 사용하지 않고 그냥 그대로 출력하고 싶다면 [[${data}]]를 사용하면 된다.

⭐ 근데 html 속성 중에 글씨를 굵게 한다거나 중간에 <> 태그가 들어가야 할 일이 생길 수도 있다. 이럴 때는 위와 같은 방법을 사용하면 소스보기에서 이상한 표현이 나온다.

Hello <b>Spring!</b>를 보낸 것이다.

< 👉 &lt
> 👉 &gt

위처럼 표시된다. 이렇게 html에서 사용하는 특수문자를 html엔터티로 변경하는 것을 이스케이프라고 한다.

타임리프는 기본적으로 이스케이프를 제공한다.

만약 위처럼 표현하기 싫다면 unescape를 사용하면 된다.

th:text 👉 th:utext
[[...]] 👉 [(...)]

로 바꿔서 사용하면 그냥 <>이 태그가 보인다!

📝 하지만 기본적으로는 escape를 사용하고 필요할 때만 unescape를 사용해야 한다!!!!

[ 변수 ]

변수를 사용할 때는 변수 표현식을 사용한다.

${...}

위와 같은 표현식을 사용한다.

그럼 예를 살펴보자

@Data
static class Person{
	
    private String name;
    private int age;
    
    public User(String name, int age){
    	
        this.name = name;
        this.age = age;
        }
}

public String variable(Model model){
	
    Person person = new Person("user1", 10);
    
    List<Person> list = new ArrayList<>();
    list.add(user1); //리스트로 접근 할 때
    
    Map<String, Person> map = new HashMap<>();
    map.put("user1", user1);
    
    model.addAttribute("user", user1);
    model.addAttribute("userList", list);
    model.addAttribute("userMap",map);
    
    return [html로~~];  
}

변수 출력하는 데에는 크게 세 가지 방법이 존재한다.

${key이름.변수이름}
${key이름['변수이름']}
${key이름.getter메서드 이름}

<!-- 객체로 넘겼을 경우 -->
<span th:text="${user.name}"></span>
<span th:text="${user['name']}"></span>
<span th:text="${user.getName()}"></span>

<!--리스트로 넘겼을 경우 -->
<span th:text="${userList[0].name}"></span>
<span th:text="${userList[0]['name']}"></span>
<span th:text="${userList[0].getName()}"></span>

<!--맵으로 넘겼을 경우 -->
<span th:text="${userMap['user1'].name}"></span>
<span th:text="${userMap['user1']['name']}"></span>
<span th:text="${userMap['user1'].getName()}"></span>

➕ 지역 변수 선언

th:with를 사용하면 지역변수를 선언해서 사용할 수 있다. 하지만 지역변수는 선언한 태그 안에서만 사용할 수 있다.

<div th:with="fist=${userList[0]}">
    <span th:text="${first.name}"></span>
</div>

[ url 링크 ]

타임리프에서 url을 사용할 때는@{...} 문법을 사용하면 된다.

예를 들어

@{/hello}

라고 경로 설정을 해 놓으면 "/hello"라는 경로로 이동하는 것이다.

그럼 파라미터를 이용한 url 입력은 어떻게 해야 할까?

⭐"/"를 사용하면 절대 경로로 사용 가능하다. url 경로상에 변수가 있으면 () 부분이 경로 변수로 처리된다. (? A=b 이런 식)

👉 경로 변수

@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})

이런 식을 입력하면 입력 결과는

/hello/(param1 value값)/(param2 vaule값)

으로 url경로가 설정된다.

👉 쿼리 파라미터 사용

쿼리 파라미터를 사용하고 싶을 때는 ()를 사용하면 된다.

@{/hello(param=${param})

이런 식을 입력하면 입력 결과는

/hello?param=(param value값)

으로 url이 입력된다!! 즉 () 안에 있는 건 쿼리 파라미터로?~~~ 이 뒤에 있는 값을 의미한다.

👉 경로 변수 + 쿼리 파라미터 사용

경로 변수와 쿼리 파라미터는 같이 활용도 가능하다.

@{hello/{param1}(param1=${param1}, param2=${param2})

/{}여기까지는 param1만 존재하기 때문에 param1까지가 경로 변수로 설정되고, 저기에 없고 () 여기 안에 존재하는 파라미터는 쿼리 파라미터로 입력된다.

/hello/(param1 value값)?param2=(param2 value값)

따라서 위와 같은 결과가 나온다.

[ 리터럴 ]

리터럴은 소스 코드상에 고정된 값을 말하는 용어이다.

따라서 꼭!!! 작은따옴표로 문자를 감싸야한다. 하지만 공백이 없으면 감싸지 않아도 된다. (그래도 꼭!!! 하기)

👉 hello world 출력하고 싶을 때

<span th:text ="'hello' + ' world'"></span>
<span th:text="'hello world'"></span>

이런 식으로 꼭 안에 작은따옴표를 붙여야 한다. 하지만 일일이 붙이기 귀찮을 때!! 좋은 타임리프 사용 방법이 있다.

||이거로 감싸면 된다.

<span th:text="|hello world|"></span>

이렇게 하면 깔끔하게 출력 가능🙃

[ 속성 설정 ]

th:* 속성을 이용하면 기존 속성을 타임리프가 지정한 th:* 속성으로 대체하게 된다!!

name="A" th:name="B"

이렇게 작성하면 타임리프의 속성이 우선시되어서 이름이 B가 된다!!

➕ 속성 추가

th:attrappend : 속성 값의 뒤에 값을 추가한다.
th:attrprepend : 속성 값의 앞에 값을 추가한다.
th:classappend : class 속성에 자연스럽게 추가한다.

class="hello" th:attrappend="class=' world'" <!-- class 속성 뒤에 world 추가하기 -->
class="hello" th:attrpreapend="class='world '" <!-- class 속성 앞에 world 추가하기 -->
class="hello" th:classappend="' world'" <!-- class 속성에 world 추가하기-->

이런 식으로 사용한다. 그럼 결과는

hello world
world hello
hello world

이렇게 나온다!

➕ 체크박스

<input type="checkbox" name="active" checked="false"/>

체크박스를 만들고 싶다면 check박스를 입력하면 된다. 하지만 위처럼 체크를 안 하고 싶지만, checked라는 속성이 입력되면 true, false의 여부와는 상관없이 무조건 체크가 되어버린다.

이런 경우에는 타임리프 속성을 사용하면 된다.

<!-- check 박스 체크 하고 싶을 때 -->
<input type="checkbox" name="active" th:checked="true"/>

<!-- check 박스 체크 하고 싶지 않을 때 -->
<input type="checkbox" name="active" th:checked="false"/>

참고로 th:checked="false"를 사용하면 false일 경우에는 소스코드를 볼 때 th:checked의 코드는 보이지 않는다.

[ 반복 ]

타임리프에서 반복은 th:each를 사용하면 된다.

리스트로 값을 넣었다고 가정하고!

<tr th:each="user : ${userList}">
    <td th:text="${user.name}">name</td>
    <td th:text="${user.age}">0</td>
</tr>

이렇게 사용하면 된다.

모양은 자바 반복문 for( : )이거랑 비슷한 것 같다!!

[ 조건부 평가 ]

타임리프에서 조건부 평가는 if, unless, switch로 한다!

👉 if, unless 사용

<span th:text="'미성년자'" th:if="${user.age lt 20}"></span>
<span th:text="'미성년자'" th:unless="${user.age ge 20}"></span>

여기서 참고로 lt는 <을 뜻하고, ge는 >=를 뜻한다.

조건이 false인 경우에는 태그 자체를 렌더링 하지 않는다.

따라서 페이지 소스보기를 하면 false 코드가 보이지 않게 된다.

👉 switch 사용

<td th:switch="${user.age}">
    <span th:case="10">10살</span>
    <span th:case="20">20살</span>
    <span th:case="*">기타</span>
</td>

switch~case문이랑 비슷하다.

한 가지 다른 점이 있다면 *이 의미하는 것은 만족하는 값이 없을 때 사용하는 디폴트 값이다.

10살, 20살이 아니라면 모두 기타로 렌더링 된다.

[ 주석 ]

HTML 에도 주석이 있지만 HTML 주석은 웹 브라우저 소스보기에서 그대로 보인다.

👉 표준 HTML 주석

<!-- HTML 주석처리 -->

HTML 주석 처리는 쉽게 저렇게 표시한다. HTML 주석은 타임리프가 렌더링 하지 않고 그대로 남겨둔다.

👉 타임리프 파서 주석

<!--/* 주석 */-->

<!--/*-->
<span ~~></span>
<!--*/-->

두 방법 모두 주석처리가 가능하다.

/* */ 여기 사이에 들어간 것은 모두 주석처리가 되는 것이다.

👉 타임리프 프로토타입 주석

<!--/*/
<span th:text="${data}">data</span>
/*/-->

이건 좀 특별한 주석이다.

그냥 html 파일로 열어보면 주석처리가 되어있지만, 타임리프를 렌더링 했을 때 웹브라우저를 보면 span 태그는 주석처리가 되어있지 않다!

[ 블록 ]

반복문을 쓰면서 해당 객체 정보끼리만 묶어서 반복으로 출력하고 싶을 때는 블록을 사용하면 된다.

블록은 th:block을 사용하면 되고, th:each를 쓰는 곳에 작성한다.

중요한 점! 블록으로 묶고 싶은 것끼리 div태그로 감싸준다.

<th:block th:each="user : ${userList}">
    <div>
        이름 <span th:text="${user.name}></span>
        나이 <span th:text="${user.age></span>
    </div>
</th:block>

이렇게 사용하면 이름과 나이로 묶여서 출력된다.

⭐ th:block은 렌더링 시에 사라지고, 묶인 정보만 출력된다!!

강의를 들으면서 타임리프에서 자주 사용할 것 같은 기본 문법만 정리해보았다!

이렇게 보니까 은근히 많고 자주 쓰면서 익숙해져야 할 것 같다😃

이 포스팅은 인프런 김영한 님의 스프링mvc 2편을 보고 정리한 글입니다.

저작자표시