[Thymeleaf] 타임리프 기본 표현식과 속성 기능

기본 표현식

 

01.  ${...} : 변수 표현식 (Variable Expressions)

• 서버에서 전달된 변수를 참조할 때 사용
  

  ${cssStyle}

 

02.  *{...} : 선택 변수 표현식 (Selection Variable Expressions)

• 선택된 객체의 속성 값을 참조할 때 사용
• 선택된 객체의 속성에 바로 접근할 수 있음
  

  <form th:object="${user}">
  ​​​​<label>Name: </label>
  ​​​​<input type="text" th:value="*{name}" />
  </form>

 

03.  #{...} : 메시지 표현식 (Message  Expressions)

• 메시지 파일(주로 messages.properties)에서 값을 참조할 때 사용
• 다국어나 반복적으로 사용되는 텍스트 관리할 때 많이 사용
  

  # messages.properties 파일
  welcome.message=Welcome to our website!
  
  # html 파일
  <p th:text="#{welcome.message}"></p>
  
  # 렌더링 결과
  <p>Welcome to our website!</p>

 

04.  @{...} : 링크 URL 표현식 (Link URL Expressions)

• 링크를 동적으로 생성할 때 사용
• 타임리프는 웹 애플리케이션의 컨텍스트 경로를 자동으로 처리함
  

  <a th:href="@{/home}">Home</a>

 

05.  ~{...} : 프래그먼트 표현식 (Fragment Expressions)

• 템플릿 파일의 일부(fragment)를 포함하거나 참조할 때 사용
• 재사용 가능한 UI 컴포넌트를 정의하고, 유지보수성을 높일 수 있음
  

  <div th:insert="~{header :: header}"></div>

 

06. 텍스트 리터럴

• 변수, 숫자, 메시지 표현식을 함께 사용하여 문자열을 결합할 수 있음
• |  | 기호는 텍스트 안에 포함된 변수를 처리할 때 사용하며, 자바스크립트에서 백틱(`)과 유사한 역할을 함
  

  <!-- 텍스트 리터럴 사용 전 -->
  <p th:text="'The name is' ${name}"></p>
  
  <!-- 텍스트 리터럴 사용 후 -->
  <p th:text="|The name is ${name}|"></p>

 

---

속성 값 추가 (Append)

 

01. attrappend

attrappend는 HTML 속성(class, href, style 등)에 값을 추가할 때 사용하는데, 기존 속성을 덮어쓰지 않고 특정 속성에 값을 추가함

 

🔻예시 : 버튼에 변수인 cssStyle 추가하기

<input type="button" class="btn" th:attrappend="class=${' ' + cssStyle}" />

<!-- 렌더링 결과 -->
<input type="button" class="btn warning" />

 

🔻예시 : 조건문이 참일 때, 클래스 추가하기

<tr th:attrappend="class=${prodStat.odd} ? ' odd'">

 

 

02. classappend

classappend는 기존 속성을 덮어쓰지 않고 요소에 클래스를 추가할 수 있음

 

🔻예시 : 버튼에 cssStyle 추가하기

<input type="button" class="btn" th:classappend="cssStyle" />

<!-- 렌더링 결과 -->
<input type="button" class="btn cssStyle" />

 

🔻예시 : menu의 이름이 같을 때만 'active' class 추가

<ul class="nav nav-pills">
​​​​<li class="nav-item">
‌​​​​<a class="nav-link" id="home" th:classappend="${menu} == 'home'? 'active'">home</a>
​​​​</li>
​​​​<li class="nav-item">
‌​​​​<a class="nav-link" id="board" th:classappend="${menu} == 'board'? 'active'">board</a>
​​​​</li>
​​​​<li class="nav-item">
‌​​​​<a class="nav-link" id="about" th:classappend="${menu} == 'about'? 'active'">about</a>
​​​​</li>
</ul>

 

---

Href

타임리프에서 href 는 정적인 HTML 파일을 열었을 때 사용되며,

동적인 경로(서버를 구동했을 때의 경로)는 th:href 를 사용하여 지정해줘야 함

 

01. 기본

<link href="../css/style.css" th:href="@{/css/style.css}" />

 

02. 파라미터 전달

<a class="nav-link" id="home" th:href="@{/index(${id})}">home</a>

• index 페이지에 파라미터로 id값 전달하여 컨트롤러에서 활용