개발정복, 로맨틱. 성공적

[SpringBoot] thymeleaf(타임리프) 뜻, 사용법, 문법 본문

WEB/Spring Boot

[SpringBoot] thymeleaf(타임리프) 뜻, 사용법, 문법

차정뱅이 2022. 6. 16. 12:04
728x90
반응형

thymeleaf

  • 웹 및 독립 실행형 환경 모두를 위한 최신 서버 즉 JAVA 템플릿 엔진
  • html은 브라우저에 올바르게 표시 될 수 있고 정적 프로토타입으로도 작동한다.
  • HTML을 동적으로 렌더링 하는 용도로 사용
  • spring framework용 모듈
  • 템플릿 엔진(Template Engine) 이란?
    • 웹 서비스를 만들 떄에는 서버의 데이터와 정적 자원(html, css, image)을 조합해야 됨
    • 서버에서 데이터를 보내 웹 서비스를 만드는 방법 2가지
      1. SPA(Single Page Application) - 최초 한번 전체 페이지를 다 불러오고 응답 데이터만 페이지 특정 부분 렌더링.
      2. SSR(Server Side Rendering) - 전통적인 웹 애플리케이션 방식, 요청시 마다 서버에서 처리한 후 새로고침으로 페이지에 대한 응답

사용법

  html 태그 위에 코드 추가

문법

xmlns:th
  • 타임리프의 th속성을 사용하기 위해 선언된 네임스페이스
  • 순수 HTML로만 이루어진 페이지의 경우, 선언하지 않아도 무관함
th:text
  • JSP의 EL 표현식인 ${}와 마찬가지로 타임리프도 ${} 표현식을 사용해서 컨트롤러에서 전달받은 데이터에 접근할 수 있음
  • 해당 속성은 일반적인 텍스트 형식으로 화면에 출력
th:fragment
  • <head>태그에 해당 속성을 사용해서 fragment의 이름을 지정
  • fragment는 다른 HTML에서 include 또는 replace 속성을 사용해서 적용함
th:block
  • layoutL:fragment 속성에 이름을 지정해서 실제 Content 페이지의 내용을 채우는 기능
  • 해당 기능은 동적(Dynamic)인 처리가 필요할 때 사용
th:replace
  • JSP의 <include> 태그와 유사한 속성
  • th:fragment을 통해 설정한 이름을 찾아 해당 코드로 치환
th:href
  • <a> 태그의 href 속성과 동일
  • 웹 애플리케이션을 구분하는 콘텍스트 경로(Context Path)를 포함
xmlns:layout, xmlnslayout:decorator
  • xmlns:layout은 타임리프의 레이아웃 기능을 사용하기 위한 선언
  • xmlnslayout:decorator 레이아웃으로 basic.html을 사용하겠다는 의미
h:block layout:fragment
  • layout:fragment 속성에 이름을 지정해서 실제 Content 페이지의 내용을 채움
  • 페이지마다 타이틀을 다르게 처리하고 싶을 때 해당 속성을 이용해서 타이틀을 동적(Dynamic)으로 처리
th:action
  • <form>태그 사용시 해당 경로로 요청을 보낼때 사용한
th:object
  • <form>태그에서 submit을 할 때, 데이터가 th:object에 설정해둔 객체로 받아짐
  • 컨트롤러와 뷰(화면) 사이의 DTO클래스의 객체
th:field
  • 위의 th:object 속성을 이용하면, th:field를 이용해서 HTML 태그에 멤버 변수를 매핑 할 수 있음
  • th:field을 이용한 사용자 입력 필드(input, textarea 등)는 id, name, value 속성 값이 자동으로 매핑
  • 그렇기에, 각 속성을 따로 지정할 필요가 없다.
  • th:field는 ${}표현식이 아닌, *{}표현식을 사용
  • th:object와 th:field는 컨트롤러에서 특정 클래스의 객체를 전달 받은 경우에만 사용 가능
th:checked
  • 체크박스의 경우, th:checked 속성을 이용해서 조건이 "true"에 해당하면, checked 속성을 적용
th:inline="javascript"
  • <script> 태그에 th:inline 속성을 javascript로 지정해야 자바스크립트를 사용
th:if, th:unless
  • th:if는 if 문과 동일하고, th:unless는 else 문과 같다고 볼 수 있음
  • th:unless는 일반적인 언어의 else 문과는 달리 th:if에 들어가는 조건과 동일한 조건을 지정
th:each
  • th:each는 JSTL의 , 자바의 forEach와 유사한 기능
   

 

 

출저 - https://www.thymeleaf.org/

반응형