Thymeleaf 문법

Об этом предложении

thymeleaf는 Spring Boot에서 Model에 담은 데이터를 html에 바인딩이 가능하다 바인딩을 위해서는 html 태그안에 thymeleaf 표준 표현식 구문을 입력하여 데이터 바인딩을 할 수 있다. 표현식 변수 표현식: ${...} 선택 변수 표현식: *{...} Message 표현: #{...} Link URL 표현: @{...} Fragment 표현식: ~{...} 문법 작성에 오타가 있는 경우 다음과 같이 브라우저에 오류가 출력된다. 항상 문법 오타에 주의 할 것. 문법 사용법 th:text html요소에 텍스트를 바인딩 할 때 사용된다. <p>안녕하세요</p> 예를 들어 다음과 같은 <p> 태그에 안녕하세요 부분을 Model에서 가져온 데이터로 출력한다고 가정하자. 먼저 템플릿에서 사용할 데이터를 컨트롤러에서 전달해야한다. @GetMapping("/test") public String test(Model model){ model.addAttribute("A", "123"); // Model에 변수 A에 "123"값을 추가 return "articles/test"; } 다음과 같이 컨트롤러에 메소드를 만들고 Model에 템플릿에 사용할 데이터를 넣어줘야 사용이 가능하다. <p th:text="${A}">안녕하세요</p> Model에 넣은 데이터를 사용하기 위해 다음과 같이 데이터 바인딩을 해주었다. 이같은 경우는 A 변수에 담긴 값이 <p> 태그의 텍스트인 안녕하세요 를 대체하게 되어 123 값이 출력된다. Model에 등록한 데이터는 변수이기 때문에 변수 표현식인 ${...} 를 사용했다. <p>123</p> 브라우저에서는 출력결과로 123이 렌더링되어 출력된다. th:href <a> 태그에 링크를 바인딩 할 때 사용된다. <a th:href="@{/articles}">링크</a> 링크를 바인딩하기위해 Link URL 표현식 @{...} 를 사용했다. 변수를 바인딩 하는게 아니기때문에 Model에서 데이터를 가져올 필요가 없다. 이같은 경우 <a> 태그를 클릭하게 되면 /articles 경로로 이동되게 된다. <a href="/articles">링크</a> 브라우저에 렌더링된 결과. 만약 링크에 변수를 바인딩하고 싶을 수도 있다. <a th:href="@{/articles/{id}(id=${A})}">링크</a> 링크의 변수가 필요한부분을 임의의 이름을 지어 변수이름을 만들고 {} 로 감싼후 (id=${A}) 를 뒤에 추가하여 임의의 변수 id 에 값을 넣어줘야한다. <a href="/articles/123">링크</a> 브라우저에 렌더링된 결과. A 의 값이 123 이기에 렌더링후 id 가 대체되었다. 만약 URL에 여러개의 데이터를 바인딩하고 싶을 수 있다. <a th:href="@{/articles/{id1}/{id2}(id1=${A}, id2=${B})}">링크</a> 위와 같이 , 으로 구분해서 데이터를 넣어주면 된다. th:fregment 웹페이지를 만들다보면 웹페이지마다 공통된 부분이 존재 할 수 있다. 공통된 부분을 재사용하기 위해 사용 할 수 있다. <div th:fragment="A"> abc </div> 위와 같이 사용하면 A라는 이름으로 <div>abc<div> 요소가 fregment화된다. 생성된 fregment는 다른 곳에서 재사용 할 수 있다. <div th:replace="~{layouts/test :: A}"></div> 생성된 fregment는 th:replace 문법을 통해 요소를 대체 할 수 있으며 재사용이 필요한곳에 사용해주면 된다. Fragment 표현식 ~{...} 를 사용해야하며 표현식안에 첫번째 부분인 layouts/test 부분은 fregment를 등록한 html의 디렉토리 위치를 기입해줘야하며 :: 으로 분리후 뒤에는 사용할 fregment의 이름을 적어줘야한다. <div>abc</div> 브라우저의 렌더링 결과로 <div> 태그 자체를 대체하여 fregmnet로 대체되었다. fregment를 사용하는 방법으로 한가지 더있는데 th:insert 이다 <div th:insert="~{articles/test :: A}"></div> th:replace 와 사용방법은 동일하지만 <div> 태그가 대체되는것이 아닌 <div> 태그의 하위에 fregment가 삽입된다. <div> <div>abc</div> </div> 브라우저에 렌더링 결과로 th:insert 를 적용한 태그는 대체되지않고 그대로 있으며 자식으로 fregment가 생성된 것을 알 수 있다. th:each 여러개의 데이터를 출력하고 싶을때 주로 사용된다. @GetMapping("/test") public String test(Model model){ List<Article> articleList = new ArrayList<>( Arrays.asList( new Article(1L, "title1", "content1"), new Article(2L, "title2", "content2"), new Article(3L, "title3", "content3") ) ); model.addAttribute("articleList", articleList); return "articles/test"; } 먼저 컨트롤러에서 템플릿에 사용할 여러개의 데이터를 준비하여 보내준다. 예제에서는 ArrayList인 articleList 에 3개의 데이터를 담아 Model에 등록시켜두었다. public class Article { private Long id; private String title; private String content; public Article(Long id, String title, String content) { this.id = id; this.title = title; this.content = content; } } 예제에서 사용된 Article 클래스는 위와 같은 모습이다. <div th:each="article : ${articleList}"> <p>id</p> <p>제목</p> <p>내용</p> </div> th:each로 여러개의 데이터를 가진 List를 출력 할 수 있다. articleList 에 담긴 데이터 개수만큼 순회하면서 순서대로 임의의 변수 article 에 데이터가 하나씩 들어가게된다. 임의의변수는 이름을 마음대로 해도된다. <div> <p>id</p> <p>제목</p> <p>내용</p> </div> <div> <p>id</p> <p>제목</p> <p>내용</p> </div> <div> <p>id</p> <p>제목</p> <p>내용</p> </div> 브라우저에 렌더링 결과로 articleList 에 담긴 3개의 데이터만큼 html 요소가 3번 반복되었다. 하지만 데이터 갯수만큼 요소만 반복되었지 데이터가 바인딩되어있지 않다. <div th:each="article : ${articleList}"> <p th:text="${article.id}">id</p> <p th:text="${article.title}">제목</p> <p th:text="${article.content}">내용</p> </div> 다음과 같이 데이터 바인딩을 해주게 되면 articleList 에서 순서대로 하나씩 article 에 데이터가 들어오기때문에 여러개의 데이터를 출력 할 수 있게된다. <div> <p>1</p> <p>title1</p> <p>content1</p> </div> <div> <p>2</p> <p>title2</p> <p>content2</p> </div> <div> <p>3</p> <p>title3</p> <p>content3</p> </div> 브라우저에 렌더링 결과로 articleList 의 데이터를 잘 출력한것을 볼 수있다. th:classappend html 태그에 클래스를 추가 할 수 있다. <p th:classappend="${A}">테스트</p> 예제는 Model에 123 값을 가진 A 변수가 등록되어있다고 가정한다. <p class="123">테스트</p> 브라우저에 렌더링 결과로 123 이름의 클래스가 등록된 것을 볼 수 있다. 만약 임의의 문자열과 변수를 합칠려면 어떻게 해야할까? <p th:classappend="|article-${A}|">테스트</p> 예제와 같이 리터럴 대체문법인 | 버티컬바로 감싸준 후 작성하면된다. 💡 `"article- + ${article.id}"` 다음과 같이 + 를 사용해도 가능하다. <p class="article-123">테스트</p> 브라우저에 렌더링 결과로 다음과 같이 문자열과 변수가 합쳐진모습을 볼 수 있다. 여러개의 클래스를 추가하고 싶다면 <p th:classappend="|article-${A} AAA|">테스트</p> 띄어쓰기로 구분해서 작성하면된다. <p class="article-123 AAA">테스트</p> 브라우저 렌더링 결과로 article-123 클래스와 AAA 클래스가 추가되었다. th:if th:unless thymeleaf에서 사용 할 수 있는 조건문이다. 조건문이 true 인 경우 html요소를 렌더링하고 false 이면 렌더링하지 않는다. @GetMapping("/test") public String test(Model model){ int a = 1; model.addAttribute("a", a); return "articles/test"; } 예제 테스트를 위해 컨트롤러에 a 라는 이름의 속성을 추가해두었다. <div th:if="${a}">a가 존재합니다.</div> 위의 코드는 th:if 문법으로 Model에 a 라는 속성(Attribute)가 있는지 확인하고 있는 코드이다. 만약 a 라는 속성이 Model에 등록되어있다면 <div>a가 존재합니다.</div> 가 렌더링되어 브라우저에 나타날 것이고 만약 등록되지 않았다면 브라우저에는 아무것도 렌더링되지 않는다. <div>a가 존재합니다.</div> 브라우저 렌더링 결과로 Model에 속성 a 가 존재하기 때문에 조건문이 true 가 되어 렌더링이 성공했다. <div th:unless="${a}">a가 존재하지 않습니다.</div> 다음은 th:unless 문으로 th:if 의 부정 이다. th:if 경우 a 속성이 존재하면 true 였지만 th:unless 의 경우는 a 속성이 존재하지않아야 true 인 것이다. <!-- 아무것도 렌더링되지않음 --> 브라우저 렌더링 결과로 Model에 속성 a 가 존재하기때문에 false 가 되어 아무것도 렌더링되지 않았다. @GetMapping("/test") public String test(Model model){ int a = 1; return "articles/test"; } th:unless 를 더 테스트하기 위해 컨트롤러를 수정하여 Model에 속성 a 를 등록하지 않게 수정한다. <div>a가 존재하지 않습니다.</div> 브라우저 렌더링 결과로 속성 a 가 존재하지 않기때문에 조건문이 true 가 되어 렌더링에 성공했다. <div th:if="!${a}">a가 존재하지 않습니다.</div> th:if 에 not연산자인 ! 를 붙히면 th:unless 와 동일한 효과를 낸다. 차이는 없으니 취향껏 방법을 선택하면된다. <div th:if="${a == 1}">a가 1과 같다</div> <div th:if="${a > 1}">a가 1보다 크다</div> <div th:if="${a < 1}">a가 1보다 작다</div> <div th:unless="${a == 1}">a가 1과 다르다</div> <div th:if="!${a == 1}">a가 1과 다르다</div> 변수표현식 ${...} 안에는 비교연산자 사용도 가능하다.