[Thymeleaf] 타임리프 #2 - 변수, 텍스트 (HTML 태그에 문자 삽입)

타임리프는 기본적으로 HTML 태그 안에  th:  로 시작하는 속성을 지정하여 사용한다.
변수를 사용하는 방법은  th: 로 시작하는 속성에 ${"변수명"}을 사용하여 Model에 저장된 데이터를 가져올 수 있다.
th:  로 시작하는 속성은 렌더링 될 때 없어진다.
(스프링에선 View를 반환하면서 필요한 값들을 동적으로 렌더링하여 사용자에게 보여준다. -> SSR)

 

다음은 <h1> 태그에 user객체의 필드인 name을 넣는 예시이다.

<h1 th:text="${user.name}">Hello!!</h1>

---

🎈변수 사용 예시

우선 View를 반환할 Controller을 생성한다.

• Controller

@Controller
public class ThymeleafController {
    @GetMapping
    public String form(Model model) {
        model.addAttribute("user", "Kais");
        model.addAttribute("age", 20);
        return "new-form";
    }
}

• 다음과 같이 Model 객체에 addAttribute() 메서드로 데이터를 넣어준다.
• 데이터는 객체를 넣어도 되고, 기본 자료형을 넣어도 된다.
• @Controller 애노테이션이 붙은 클래스는 View를 찾아서 반환한다.
  • 예시처럼 "new-form" 을 리턴값으로 주면 /templates/new-form.html 이 클라이언트에 렌더링되어 보내진다.

 

• View 

<!--태그 안 에서 사용 user.name = Kais -->
<h1 th:text="${user}">Hello!!</h1>
 
<!--태그 밖 에서 사용 user.age = 20 -->
<h1>[[${age}]]</h1>
  
<!-- ↓↓↓↓↓↓ 실제 렌더링된 HTML -->
<h1>Kais</h1>
 
<h1>20</h1>

• 우선 thymeleaf 기능을 사용하기 위해 html 태그 속성으로 xmlns:th="http://www.thymeleaf.org"  를 넣어준다.
• 타임리프는 기본적으로 태그 안에서 사용하도록 되어있다. 인텔리제이와 같은 IDE에서는 태그 안에서 사용할때만 자동 완성 기능을 지원한다.
• 모델에 담긴 값을 불러오기 위해서 ${...} 표현식을 사용한다.
• th:text 는 태그 안에 값을 넣어주면 해당 태그의 텍스트를 설정한다.

 

결과

실행 결과 

• 실제 렌더링된 HTML을 보면 th: 속성은 렌더링되어 없어지고 기존에 있던 텍스트도 덮여쓰여지는 것을 알 수 있다.

 

🎈다양한 객체 사용 예시

@GetMapping("/basic/variable")
public String variable(Model model) {
    Member memberA = new Member("memberA", 10);
    Member memberB = new Member("memberB", 20);
    model.addAttribute("member", memberA);

    List<Member> list = new ArrayList<>();
    list.add(memberA);
    list.add(memberB);
    model.addAttribute("members", list);

    Map<String, Member> map = new HashMap<>();
    map.put("memberA", memberA);
    map.put("memberB", memberB);
    model.addAttribute("memberMap", map);
    
    return "basic/variable";
}

 

<ul>Object
  <li><span th:text="${member.username}"></span></li>
  <li><span th:text="${member['username']}"></span></li>
  <li><span th:text="${member.getUsername()}"></span></li>
</ul>
<ul>List
  <li><span th:text="${members[0].username}"></span></li>
  <li><span th:text="${members[0]['username']}"></span></li>
  <li><span th:text="${members[0].getUsername()}"></span></li>
</ul>
<ul>Map
  <li><span th:text="${memberMap['memberA'].username}"></span></li>
  <li><span th:text="${memberMap['memberA']['username']}"></span></li>
  <li><span th:text="${memberMap['memberA'].getUsername()}"></span></li>
</ul>

• 다음과 같이 객체부터 Map, List와 같은 자료형까지 접근 가능하다. 물론 ${...} 표현식을 사용해야한다.

html 내부에서 자바 코드를 사용하는 모습

 

 

🎈지역 변수 선언

th:with 를 사용하여 태그 범위 내에서 사용할 수 있는 지역 변수를 선언할 수 있다.

<!-- 타임리프 -->
<div th:with="username=${user.name}">
  <p>유저 이름은 <span th:text="${username}"></span></p>
</div>

<!-- ↓↓↓↓↓↓ 실제 렌더링된 HTML -->
<div>
  <p>유저 이름은 <span>Kais</span></p>
</div>

결과

 

 

🎈텍스트 삽입

타임리프로 텍스트를 동적으로 삽입하기 위해선 th:text 를 사용하면 된다.

<!-- 타임리프 -->
<ul>
  <li>ht:text 사용<span th:text="${data}"></span></li>
  <li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>
</ul>

<!-- ↓↓↓↓↓↓ 실제 렌더링된 HTML -->
<ul>
  <li>ht:text 사용<span>데이터</span></li>
  <li>컨텐츠 안에서 직접 출력하기 = 데이터</li>
</ul>

• 태그 내부 : th:text=${변수명} - 변수 값을 태그의 텍스트로 삽입한다.
• 태그 외부 : [[${변수명}]] - 변수 값을 텍스트로 변환한다.

 

 

---

 

 

 

참고

• https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2/dashboard

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의

• https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#data-conversion-formatting

Tutorial: Using Thymeleaf