Thymeleaf #1 [문법 정리]

Thymeleaf 문법 정리

현재 Spring을 사용하시는 모든 분들은 한번씩은 거쳐 보셨거나 지금도 사용하시는 Thymeleaf 문법중에 가장 많이 사용하는 문법위주로 정리해 보겠습니다.

 

• #{메세지 표시}
  언어 선택 혹은 같은 내용을 반복해서 표시 해야 할때에 우리가 자주 쓰는 파일이 있습니다.
  "message.properties"  여기에 표시된 내용들은 모두 사용 가능합니다.
  예를 들어 "이 페이지는 회원 전용 페이지 입니다." 라는 문구가 있다고 가정 했을 때
  문장을 계속 타이핑 하다보면 실수나 오타등으로 문제가 생기는 걸 방지 할 수 있다.
  
  message.properties :
  user.only=이 페이지는 회원 전용 페이지 입니다.
  
  html : 
  <div th:text=#{user.only}></div>

• ${서버에서 전달 받은 값}
  서버에서 화면을 구성할 값은 전달 받은 경우 해당 내용을 dom에 적용하는 경우에 사용된다.
  
  Model : 
  model.addAttribute("userName", "David");
  
  html : 
  <div th:text=${userName}></div>
  
  
• *{부모 dom이 가진 하위 파라미터 정보}
  부모 dom이 객체정보를 받았을때 자식 dom에게 데이터를 전달 할 때 사용된다.
  
  아래 두개의 예제는 같은 결과를 가집니다. 상속 관계에 초점을 두고 보시는게 좋을 것 같습니다.
  
  html - *{} : 
  <div th:object=${user}>
      <span th:text=*{firstName}></span>
      <span th:text=*{age}></span>
  </div>
  
  html - ${} :
  <div>
      <span th:text=${usesr.firstName}></span>
      <span th:text=${user.age}></span>
  </div>
  
  
• @{링크}
  a 태그에 한해서 href 정보를 작성할 때 사용합니다.
  href="링크" or th:href="@{링크}" 둘다 같은 동작을 하지만 우리가 로그인 정보에 따라 같은 메뉴라도 다른 경로를 제공하고 싶을때는 어떨까요?
  Thymeleaf가 없이 javascript를 통해 변경을 할 수 있지만 좀 더 유저에게 빠른 속도감?을 준다면 th:href에게 손을 들어주고 싶습니다.
  
  html :
  <a th:href="@{'/user/'+${userName}}"></a>
  
  
• ~{html 파일}
  메뉴나 footer처럼 반복되는 html을 미리 만들어 두고 필요한 페이지에 추가 구성으로 넣을 수 있는 기능입니다.
  
  html :
  ~{html 파일} -> 상속받은 html에서 해당 layout들을 상속 받아 default 값으로 사용합니다.
  
  이 내용은 내용이 길어질 각오를 해야해서 다음 포스트에 다루겠습니다.
  
  
  
• Thymer Document
  https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

Tutorial: Using Thymeleaf