스프링/4. 스프링 MVC-2

16. 레이아웃 템플릿 확장

sdafdq 2023. 8. 26. 00:11
@GetMapping("/layoutExtend")
public String layoutExtend(){
    return "template/layoutExtend/layoutExtendMain";
}

 

 

<!DOCTYPE html>
<html th:replace="~{template/layoutExtend/layoutFile :: layout(~{::title},~{::section})}"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <title>메인 페이지 타이틀</title>
</head>
<body>
<section>
  <p>메인 페이지 컨텐츠</p>
  <div>메인 페이지 포함 내용</div>
</section>
</body>
</html>

아예 html에 replace 해놨다.

 

<!DOCTYPE html>
<html th:fragment="layout (title, content)" xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:replace="${title}">레이아웃 타이틀</title>
</head>
<body>
<h1>레이아웃 H1</h1>
<div th:replace="${content}">
    <p>레이아웃 컨텐츠</p>
</div>
<footer>
    레이아웃 푸터
</footer>
</body>
</html>

레이아웃 템플릿에서 인자로 받아 특정 부분을 대체시킨다.

 

 

이건 뭐냐면 비슷한 형태의 웹페이지가 있을 때 특정 부분들은 양식을 지키면서 

다른 콘텐츠나 이런 것들만 인자로 줘서 바꾸는 거다.

 

 

기본 틀이 있고 거기에 내가 필요한 부분만 태그로 구현해 놓은다음에 그것 부분만 인자로 넘기는. 물론 레이아웃에서도 그게 어디쪽으로 들어갈 지 구현을 해 놔야지.

 

 

뭐 조각이냐, 레이아웃이냐, 레이아웃 확장이냐 이렇게 해놓긴 해 놨는데

내가보기에는 똑같은 기능 훨씬 더 큰 범위로 확장시켰을 뿐인걸로 보임. 리터럴값, 태그, 아예 문서 전체에서 특정 태그만 순으로.

 

단, 태그 넘길때는 ~{::태그명} 이것도 어떤 조각을 넘긴다 그런 느낌인가 봄. 그냥 리터럴 넘길때는 그냥 쓰면 됨.. 리터럴을 쓴다던지, ${key}로 넘긴다던지..

근데 id나 class로 보내는 건 권장되는 방법이 아니라고 함. 그런 문법도 없는 듯.

 

 

장점은 예를 들어 공통적인 footer 부분을 바꿔야 할 때, 만약 이렇게 컴포넌트화? 레이아웃화 안해놓으면 그 웹페이지들을 모두 바꿔야 하지만 이건 한번만 바꾸면 다 바뀜.