[내일배움캠프 Spring 3기] ViewResolver와 Thymeleaf 기본 문법

ViewResolver

ViewResolver는 컨트롤러가 반환한 논리적인 뷰 이름을 실제 뷰로 바꿔주는 번역기 역할을 함

@Controller
public class HelloController {
    
    @GetMapping("/hello")
    public String hello(Model model) {
        model.addAttribute("message", "Hello, Spring!");
        return "hello";  // view
    }
}

위 코드에서 return "hello"; 코드는 ViewResolver에 의해 ”/templates/hello.html”이라는 실제 뷰 파일 경로와 매핑됨

여기서 “hello”는 논리적인 뷰 이름이 되는 것이며, “/templates/hello.html”는 실제 뷰가 됨

---

Model 객체를 통한 데이터 전달

Model은 Controller에서 View로 데이터를 전달하기 위한 Spring MVC의 핵심 인터페이스

ViewResolver 섹션에서의 위 코드에서 model.addAttribute("message", "Hello, Spring!"); 부분이 바로 Model 객체를 활용하는 코드

model.addAttribute("키_이름", 값);

파라미터 설명:

• 첫 번째 파라미터 (키, Key): View에서 사용할 변수명
• 두 번째 파라미터 (값, Value): 전달할 데이터

즉, model.addAttribute("message", "Hello, Spring!"); 이 코드에서는 Key가 “message”이고, Value가 “Hello, Spring!”인 Model 객체를 세팅한 것

그럼 이제 프론트가 보여지는 View에서 “message”키로부터 “Hello, Spring!”이라는 값을 불러와서 유저에게 데이터를 보여줄 수 있게 됨

---

Thymeleaf 기본 문법

1. 텍스트 출력 (th:text)

th:text는 HTML 태그의 텍스트 내용을 서버에서 전달된 데이터로 변경하는 데 사용. <p>기본 텍스트</p>가 있더라도 th:text 안의 값이 그 자리를 완전히 대체함

<!-- 기본 사용법 -->
<h1 th:text="${message}">기본 메시지</h1>
<!-- 결과: <h1>Hello, Spring MVC!</h1> -->

<!-- 문자열 결합 -->
<p th:text="'안녕하세요, ' + ${name} + '님!'">안녕하세요, 사용자님!</p>

<!-- 조건부 텍스트 -->
<span th:text="${user != null ? user.name : '게스트'}">사용자</span>

2. 속성 설정 (th:href, th:src, th:class)

th:* 문법을 사용하면 href, src, class 등 HTML 태그의 다양한 속성 값을 동적으로 설정할 수 있음

<!-- 링크 생성 -->
<a th:href="@{/user/profile(id=${user.id})}">프로필 보기</a>
<!-- 결과: <a href="/user/profile?id=123">프로필 보기</a> -->

<!-- 이미지 경로 -->
<img th:src="@{/images/logo.png}" alt="로고">

<!-- CSS 클래스 조건부 적용 -->
<div th:class="${user.isActive ? 'active' : 'inactive'}">상태</div>

3. 반복 처리 (th:each)

th:each는 Java의 for-each 루프처럼 컬렉션(List, Set 등)의 데이터를 반복하여 여러 개의 HTML 요소를 생성할 때 사용

<!-- 리스트 반복 -->
<ul>
    <li th:each="product : ${products}" th:text="${product.name}">상품명</li>
</ul>

<!-- 인덱스와 함께 반복 -->
<tr th:each="user, status : ${users}">
    <td th:text="${status.index + 1}">번호</td>
    <td th:text="${user.name}">이름</td>
</tr>

4. 조건 처리 (th:if, th:unless)

th:if와 th:unless는 특정 조건이 참이거나 거짓일 때 HTML 블록을 렌더링하거나 렌더링하지 않도록 제어하는 속성

<!-- 조건부 표시 -->
<div th:if="${user.isAdmin}">관리자 메뉴</div>
<div th:unless="${user.isAdmin}">일반 사용자 메뉴</div>

<!-- 삼항 연산자 활용 -->
<span th:class="${user.isOnline ? 'online' : 'offline'}" 
      th:text="${user.isOnline ? '온라인' : '오프라인'}">상태</span>