[DEV] J-Jay

스프링 부트 Blog 만들기 (2) - Thymeleaf 본문

Back-end/Spring

스프링 부트 Blog 만들기 (2) - Thymeleaf

J-Jay 2023. 9. 5. 22:38
728x90

Thymeleaf 타임리프

 

타임리프는 템플릿 엔진이다. 템플릿 엔진이란 스프링 서버에서 데이터를 받아 우리가 보는 웹 페이지, HTML 상에 데이터를 넣어 보여주는 도구이다.

 

템플릿 엔진 개념

<h1 text =${성명}>
<p text =${나이}>

h1 태그에는 ${성명}이 text 어트리뷰로 할당되어 있다. p 태그 역시 ${나이} 어트리뷰트로 되어있다.

이것이 바로 템플릿 문법이다. 이렇게 해 두면 서버에서 성명, 나이라는 키로 데이터를 템플릿 엔진에 넘겨주고 템플릿 엔지는 이를 받아 HTMl에 값을 적용한다.

{
  성명 : "J-Jay"
  나이 : 19
}

값이 달라지면 그때 그때 화면에 반영하니 동적인 웹 페이지를 만들 수 있게 된다. 템플릿 엔진은 각각 문법이 미묘하게 달라 템플릿 엔진마다 문법을 새로 배워야 하나, 대부분의 구조는 비슷하여 한 번 배워 두면 다른 템플릿 엔진은 금방 익숙하게 다룰수 있다. 대표적인 템플릿 엔진으로는 JSP, 타임리프, 프리마커 등이 있다.

 

표현식과 문법

타임리프의 문법은 직관적이므로 쉽게 배울 수 있다. 자주 사용하는 표현식과 문법은 다음과 같다.

 

표현식

표현식 설명
${...} 변수의 값 표현식
#{...} 속성 파일 값 표현식
@{...} URL 표현식
*{...} 선택한 변수의 표현식, th:object에서 선택한 객체에 접근

문법

표현식 설명 예제
th:text 텍스트를 표현할 때 사용 th:text=${person.name}
th:each 컬렉션을 반복할 떄 사용 th:each="person : ${persons}"
th:if 조건이 true일 떄만 표시 th:if="${person.age} >=19"
th:unless 조건이 false일 때만 표시 th:unless="${person.age} >=19"
th:href 이동 경로 th:href="@{/persons(id=${person.id})}"
th:with 변수값으로 지정 th:width="name=${person.name}"
th:object 선택한 객체로 지정 th:object="${person}"

 

build.gradle (타임리프 의존성 추가)

dependencies {
    ...
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}

타임리프 문법  기본 익히기

 

ExampleController.java

@Controller
public class ExampleController {

    @GetMapping("/thymeleaf/example")
    public String thymeleafExample(Model model) { //뷰로 데이터를 넘겨주는 모델 객체
        Person examplePerson = new Person();
        examplePerson.setId(1L);
        examplePerson.setName("J-Jay");
        examplePerson.setAge(19);
        examplePerson.setHobbies(List.of("운동", "코딩"));

        model.addAttribute("person", examplePerson); //Person 객체 저장
        model.addAttribute("today", LocalDate.now());

        return "example"; //example.html 뷰 조회
    }

    @Setter
    @Getter
    class Person {
        private Long id;
        private String name;
        private int age;
        private List<String> hobbies;
    }
}

위의 코드에서는 Model이라는 것이 있다. Model 객체는 뷰, 즉 HTMl 쪽으로 값을 넘겨주는 객체이다. Model 객체는 따로 생성할 필요 없이 코드처럼 인자로 선언하기만 하면 스프링이 알아서 만들어주므로 편리하게 사용가능하다.

addAttribute() 메서드로 모델에 값을 저장하며, 여기서는 "person"이라는 키에 사람 정보를, "today"라는 키에 날짜 정보를 저장한다. thymeleafExample()메서드가 반환하는 값은 "example" 이다. 이 ㄱ밧은 클래스에 붙은 어노테이션이 @Controller이므로 뷰의 이름을 반환한다. 즉 쉽게 말해 스프링 부트는 컨트롤러의 @Controller 어노테이션을 보고 

'반환하는 값의 읾을 가진 뷰의 파일 찾아!'  라고 이해하고 resource/templates 디렉터리에서 example.html을 찾아 웹 브라우저에 해당 파일을 보여준다.

 

Model객체 역할

example.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>타임리프 익히기</h1>
<!-- LocalDate를 yyyy-MM-dd 포맷으로 변경 -->
<p th:text="${#temporals.format(today, 'yyyy-MM-dd')}"></p>

<div th:object="${person}"> <!-- person을 선택한 객체로 지정-->
    <p th:text="|성명 : *{name}|"></p>
    <p th:text="|나이 : *{age}|"></p>
    <p>취미</p>
    <ul th:each="hobby : *{hobbies}"> <!-- hobbies 개수만큼 반복 -->
        <li th:text="${hobby}"></li>
        <!-- 반복 대상이 운동이라면 '(대표 취미)' 표시 추가 -->
        <span th:if="${hobby == '운동'}">(대표 취미)</span>
    </ul>
</div>

<a th:href="@{/api/articles/{id}(id=${person.id})}">글 보기</a>

</body>
</html>

#temporals.format()함수를 사용하면 LocalDate 타입인 오늘 날짜를 yyyy-MM-dd형식의 String타입으로 포맷팅 가능하다.

th:object를 사용해 모델에서 받은 객체 중 "person"이라는 키를 가진 객체의 데이터를 하위 태그에 지정한다.

하위 태그에서는 *{...}표현식을 사용해 부모 태그에 적용한 객체 값에 접근이 가능하다. th:text는 텍스트를 표현한다.

여기서는 '성명 : ' 이라는 문자열과 person 객체의 name 값인 J-Jay를 이어 붙인다.

th:each는 객체의 hobbies 개수만큼 반복하는 반복자이다. th:if는 말 그대로 if문이다.

 

결과

저작자표시

'Back-end > Spring' 카테고리의 다른 글

스프링 시큐리티(Security)  (0) 2023.09.09
스프링 부트 Blog 만들기 (3)  (1) 2023.09.09
스프링 부트 Blog 만들기 (1)  (0) 2023.09.04
스프링 부트 ORM (2)  (0) 2023.09.03
스프링 부트 ORM (1)  (0) 2023.09.03
'Back-end/Spring' Related Articles more