Spring Boot thymeleaf page별 내용 동적 변경

jylee·2024년 1월 17일

그냥생각나는거

목록 보기

33/48

프로젝트 구조

java
  ㄴ com.example.app.controller.SampleController
resources
  ㄴ template
    ㄴ index.html
    ㄴ base
      ㄴ main.html
      ㄴ section.html
      ㄴ test1.html
      ㄴ test2.html

컨트롤러

@Controller
public class SampleController {
    private static final String BASE_MAIN = "base/main";

    @GetMapping("/")
    public String home(Model model) {
        model.addAttribute("view", "index");
        model.addAttribute("title", "noTitle");
        return BASE_MAIN;
    }

    @GetMapping("/test1")
    public String test1(Model model) {
        model.addAttribute("view", "base/test1");
        model.addAttribute("fragment", "div11");
        model.addAttribute("title", "Title1");
        return BASE_MAIN;
    }
    @GetMapping("/test2")
    public String test2(Model model) {
        model.addAttribute("view", "base/test2");
        model.addAttribute("fragment", "div22");
        model.addAttribute("title", "Title2");
        return BASE_MAIN;
    }
}

main.html

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}"></title>
</head>
<body>
<p>main.html 내용</p>
<section th:replace="~{base/section :: section}"></section>
</body>
</html>

section.html

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<section>
    <p>Section.html 내용</p>
    <div th:replace="~{${view} :: ${fragment}}"></div>
</section>
</html>

index.html

<!DOCTYPE HTML>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<body>
<div>
    <p>index.html 내용</p>
    <p><a href="/" th:href="@{/test1}">test1 이동</a></p>
    <p><a href="/" th:href="@{/test2}">test2 이동</a></p>
</div>
</body>
</html>

test1.html

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<body>
<p>test1.html 내용</p>
<div id="testDiv11" th:fragment="div11">
    testDiv11
</div>
<div id="testDiv12" th:fragment="div12">
    testDiv12
</div>
</body>
</html>

test2.html

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<body>
<p>test2.html 내용</p>
<div id="testDiv21" th:fragment="div21">
    testDiv21
</div>
<div id="testDiv22" th:fragment="div22">
    testDiv22
</div>
</body>
</html>

"/" 호출

'title' 이라는 키 값으로 noTitle이라는 문자열 (head-title 지정용) model에 추가
view 라는 키 값으로 index라는 문자열 (html 파일 경로) model에 추가
base/main.html 리턴
ViewResolver가 'base/main.html View를 반환
main.html의 <title> 태그 내용은 noTitle로 변경
<section> 태그는 section.html에서 th:fragment="section" 이라고 지정된 태그로 치환
<section th:replace="~{base/section :: section}"></section>
section.html의 <section> 태그 내부의 <div> 태그는 model에 담긴 view 라는 키 값을 조회하여 index 라는 문자열을 가져오는데 model에 fragment 라는 키 값은 없으므로 아래와 같이 변경
<div th:replace="~{${view} :: ${fragment}}"></div>
=> <div th:replace="~{index}"></div>)
<div th:replace="~{index}"></div> 로 인해 <div> 태그는 index.html의 내용으로 치환

결과

"/test1" 호출

'title' 이라는 키 값으로 Title1이라는 문자열 (head-title 지정용) model에 추가
view 라는 키 값으로 base/test1라는 문자열 (html 파일 경로) model에 추가
fragment 라는 키 값으로 div11라는 문자열 (th:fragment) model에 추가
base/main.html 리턴
ViewResolver가 'base/main.html View를 반환
main.html의 <title> 태그 내용은 Title1로 변경
<section> 태그는 section.html에서 th:fragment="section" 이라고 지정된 태그로 치환
<section th:replace="~{base/section :: section}"></section>
section.html의 <section> 태그 내부의 <div> 태그는 model에 담긴 view 라는 키 값을 조회하여 base/test1 라는 문자열을 가져오고 model에 fragment 라는 키 값을 조회하여 div11이라는 문자열을 가져와서 아래와 같이 변경
<div th:replace="~{${view} :: ${fragment}}"></div>
=> <div th:replace="~{base/test1 :: div11}"></div>)
<div th:replace="~{base/test1 :: div11}"></div>로 인해 <div> 태그는
test1.html의 <div id="testDiv11" th:fragment="div11">으로 치환

결과

"/test2" 호출

'title' 이라는 키 값으로 Title2이라는 문자열 (head-title 지정용) model에 추가
view 라는 키 값으로 base/test2라는 문자열 (html 파일 경로) model에 추가
fragment 라는 키 값으로 div22라는 문자열 (th:fragment) model에 추가
base/main.html 리턴
ViewResolver가 'base/main.html View를 반환
main.html의 <title> 태그 내용은 Title2로 변경
<section> 태그는 section.html에서 th:fragment="section" 이라고 지정된 태그로 치환
<section th:replace="~{base/section :: section}"></section>
section.html의 <section> 태그 내부의 <div> 태그는 model에 담긴 view 라는 키 값을 조회하여 base/test2 라는 문자열을 가져오고 model에 fragment 라는 키 값을 조회하여 div22이라는 문자열을 가져와서 아래와 같이 변경
<div th:replace="~{${view} :: ${fragment}}"></div>
=> <div th:replace="~{base/test2 :: div22}"></div>)
<div th:replace="~{base/test2 :: div22}"></div>로 인해 <div> 태그는
test2.html의 <div id="testDiv22" th:fragment="div22">으로 치환