🔎 타임리프(Thymeleaf)란?
타임리프(Thymeleaf)는 자바(Spring) 기반 웹 애플리케이션에서 많이 사용되는 템플릿 엔진입니다
쉽게 말해서 HTML을 동적으로 생성할 수 있게 도와주는도구!!
🔎 타임리프를 사용하는 이유
- 요즘 리액트, 뷰 같은 최신 프론트엔드 프레임워크가 많이 쓰이지만, 타임리프는 자바(Spring) 프로젝트에서 화면을 만들 때 주로 사용되고있습니다
- Thymeleaf의 장점은 HTML을 바로 브라우저에서 확인할 수 있고, 정적 HTML 파일처럼 보이지만 실제로는 서버에서 데이터를 넣어 동적으로 화면을 구성하는 방식입니다
🔎 타임리프 특징
템플릿 재사용:
- HTML 파일에 공통된 헤더나 푸터등 재사용성이 높습니다
서버에서 데이터 처리:
- 자바에서 처리한 데이터를 HTML에 쉽게 넣어 코드를 구현할수있습니다
문법:
- 타임리프의 문법은 HTML을 그대로 유지하면서 필요한 부분만 추가하는 방식으로 기능을 숙지하면 쉽게 익숙해질수 있습니다
💡 즉!!! 타임리프는 HTML 페이지에 자바 데이터를 쉽게 넣는 기술로,사용자가 웹페이지에서 보는 상품 목록이나 사용자 정보가 있다면, 이 데이터를 서버에서 처리하고 그 정보를 HTML에 넣어 보여줍니다!!
그래서 개발자는 자바에서 처리한 데이터를 HTML에서 자유롭게 보여줄 수 있습니다
🔎 타임리프 속성
th:text
- HTML 태그 안에 텍스트를 삽입할 때 사용합니다
- 서버에서 전달된 데이터를 이 속성으로 표시할 수 있습니다.
예제▼
- span 태그 안에 데이터를 넣는 경우
<span th:text="${message}">기본 텍스트</span>=> 여기서 ${message}는 서버에서 받아온 데이터이고, 브라우저에 표시될 때는 기본 텍스트 대신 이 값이 출력됩니다! ${message} 값이 안녕하세요라면, 화면에 안녕하세요가 나타납니다
th:href
- 링크를 동적으로 생성할 때 사용하는 속성입니다
- href 속성과 비슷한 역할을 하지만, 동적인 값을 넣을 수 있습니다
<a th:href="@{/path/${id}(id=${userId})}">링크</a>=> URL에 userId 값을 넣어 동적으로 링크가 생성됩니다
만약 userId가 10이라면, 결과는 /path/10이 됩니다
th:src
- 이미지나 자바스크립트 파일의 경로를 동적으로 지정할 때 사용하는 속성입니다
- 이미지 경로를 동적으로 지정할 수 있습니다
<img th:src="@{/images/${imageName}}" alt="이미지">=> 여기서 ${imageName} 값에 따라 다른 이미지를 표시할 수 있습니다
th:if
- 조건에 따라 HTML 태그를 보여줄지 말지 결정하는 속성입니다
- 특정 조건이 참일 때만 해당 요소가 화면에 표시됩니다
<p th:if="${user.isLoggedIn}">환영합니다</p>=> user.isLoggedIn이 true일 때만 p 태그가 보여집니다!
그렇지 않으면 HTML에서 아예 보이지 않습니다
th:each
- 반복문을 통해 리스트나 배열의 데이터를 화면에 출력할 때 사용하는 속성입니다
예제▼
- 여러 개의 데이터를 반복해서 보여줄 때
<ul>
<li th:each="user : ${userList}">
<span th:text="${user.name}"></span>
</li>
</ul>
=> userList 안에 있는 여러 사용자 이름을 li 태그로 반복해서 출력합니다
th:value
- 폼 입력 필드에 값을 동적으로 넣을 때 사용하는 속성입니다
예제▼
- input 태그 안에 기본값을 설정할 때
<input type="text" th:value="${user.name}" />=> user.name 값을 input 필드에 기본값으로 넣습니다
요약
타임리프에서는 동적인 데이터를 HTML에 쉽게 삽입하기 위해 다양한 속성을 제공합니다!
그중 th:text, th:href, th:src, th:if, th:each 등이 자주 사용 됩니다
타임리프 속성을 통해 서버에서 받아온 데이터를 HTML에 표시하거나 반복, 조건 처리 등을 할 수 있으며 Spring 프로젝트에서 편리합니다
