Day99 실습프로젝트(Thymeleaf)

Thymeleaf

1. Thymleaf 템플릿 엔진 구동 및 특징

1) 구동원리

• JSP와 마찬가지로 템플릿 엔진을 이용하여 데이터를 받고 해당 자리에 삽입하여 html을 생성한다.

2) 특징

• 기본 형식이 .html이기 때문에 별도의 엔진 없이도 웹에서 실행 할 수 있다.

• 웹 디자이너가 데이터를 삽입하지 않아도 전체적인 레이아웃을 확인 할 수 있어 개발의 효율성이 증가된다.

  

2. 기본문법

1) Standard Expression Syntax

• Simple expressions 1) 변수 표현식
  • ${...}: 모델(Model)에 담긴 데이터를 HTML에서 표현할 때 사용한다.

    <p th:text="${user.name}">User Name</p>
    

    이 구문은 user 객체의 name 필드를 표시합니다.

  2) 메시지 표현식

  • #{...}: 메시지 파일(예: messages.properties)에서 키를 통해 다국어 메시지를 가져올 때 사용한다.

    <p th:text="#{welcome.message}">Welcome, Guest!</p>
    

    messages.properties 파일에 정의된 welcome.message=Welcome! 메시지를 화면에 출력합니다.

  3) 링크 표현식

  • @{...}: URL을 생성할 때 사용한다.

    <a th:href="@{/user/profile}">Profile</a>
    

    이 구문은 /user/profile URL로 이동하는 링크를 생성합니다.

  4) 선택 변수 표현식

  • *{...}: 폼(form) 처리에서 주로 사용되며, 바인딩된 객체의 필드 값을 간편하게 참조할 수 있다.

    <input type="text" th:field="*{name}" />
    

    바인딩된 객체의 name 필드를 참조하여 입력란을 생성합니다.

• Literals 1) 텍스트 리터럴 (Text Literals)
  • 예시: 'one text', 'Another one!', 'Hello, World!'
  • 설명: 작은따옴표(' ')로 둘러싸인 문자열로, 템플릿에서 텍스트 데이터를 직접 표현할 때 사용한다.
  • 사용 예시:

    <p th:text="'Hello, World!'">Default Text</p>
    

  2) 숫자 리터럴 (Number Literals)

  • 예시: 0, 34, 3.0, 12.3
  • 설명: 정수 또는 소수 형태로, 수치 값을 직접 나타낸다.
  • 사용 예시:

    <p th:text="34">Default Number</p>
    

  3) 불리언 리터럴 (Boolean Literals)

  • 예시: true, false
  • 설명: 참(true)과 거짓(false)을 나타내며, 조건식 등에서 자주 사용된다.
  • 사용 예시:

    <p th:if="true">This text is visible</p>
    

  4) Null 리터럴 (Null Literal)

  • 예시: null
  • 설명: 값이 없음을 나타낸다. null 체크나 기본값 설정 등에서 활용된다.
  • 사용 예시:

    <p th:if="${user.name == null}">No Name Provided</p>
    

  5) 리터럴 토큰 (Literal Tokens)

  • 예시: one, sometext, main
  • 설명: 예약어나 표준 리터럴 이외의 텍스트를 표시할 때 사용된다.. 리터럴 토큰은 작은따옴표 없이 사용될 수 있으며, 조건문이나 switch-case 표현식 등에서 자주 사용된다.
  • 사용 예시:

    <p th:text="one">One</p>
    

• Text operations 1) 문자열 결합 (String Concatenation)
  • + 연산자: 여러 문자열을 결합하여 하나의 문자열로 만들 때 사용한다.
  • 예시:

    <p th:text="'Hello, ' + ${name} + '!'">Hello, User!</p>
    

  2)리터럴 대체 (Literal Substitutions)

  • …	구문: 문자열 내에서 변수를 포함하여 리터럴을 쉽게 삽입할 수 있게 한다.

  • 예시 :

    <p th:text="|The name is ${name}|">Default Text</p>
    

• Thymeleaf Conditional Operators 1) If-Then (삼항 연산자)
  • 구문: (if) ? (then)
  • 설명: 조건이 true인 경우에만 특정 값을 반환한다.
  • 예시:

    <p th:text="${user.active} ? 'User is active'">Inactive</p>
    

    • user.active가 true일 때 "User is active"가 출력되고, 그렇지 않으면 기본 텍스트인 "Inactive"가 표시됩니다.

  2) If-Then-Else (삼항 연산자)

  • 구문: (if) ? (then) : (else)
  • 설명: 조건이 true일 때와 false일 때 각각 다른 값을 반환한다.
  • 예시:

    <p th:text="${user.active} ? 'Active User' : 'Inactive User'">User Status</p>
    

    • user.active가 true이면 "Active User"가 출력되고, false일 경우 "Inactive User"가 출력된다.

  3) Default 연산자 (Elvis 연산자)

  • 구문: (value) ?: (defaultvalue)
  • 설명: 왼쪽 값이 null 또는 false일 경우, 기본값을 반환한다.
  • 예시:

    <p th:text="${user.name ?: 'Anonymous'}">Default Name</p>
    

    • user.name이 null이라면 "Anonymous"가 출력된다.

2) Iteration

• th:each: 컬렉션을 반복하며 HTML 요소를 생성할 때 사용한다.

  <ul>
      <li th:each="item : ${items}" th:text="${item.name}">Item Name</li>
  </ul>
  

  items 컬렉션의 각 item을 반복하여 item.name을 출력하는 <li> 요소를 생성한다.

3) Conditional Evaluation

• th:if, th:unless: 조건에 따라 특정 HTML 요소를 표시할지 결정한다.

  <p th:if="${user.active}">Active User</p>
  <p th:unless="${user.active}">Inactive User</p>
  

  user.active가 true이면 첫 번째 문장이, false이면 두 번째 문장이 표시된다.