[Thymeleaf] 템플릿 조각

웹 페이지 개발 시, 상하단 영역이나 좌측 카테고리 등 여러 페이지에 걸쳐 함께 사용하는 공통 영역이 많이 있다. 이러한 부분들을 하나씩 코드를 복사하여 개발한다면, 향후 수정 시에 각 페이지마다 수정하는 시간 소모를 필요로 한다. 이것은 상당히 비효율적이며, 해당 문제를 해결하기 위해 타임리프의 템플릿 조각과 레이아웃 기능 사용한다.

 

 

Controller

@Controller
@RequestMapping("/template")
public class TemplateController {
	@GetMapping("/fragment")
	public String template() {
	return "template/fragment/fragmentMain";
	}
}

 

Footer

<footer th:fragment="copy">
 푸터 자리 입니다.
</footer>

<footer th:fragment="copyParam (param1, param2)">
	<p>파라미터 자리 입니다.</p>
	<p th:text="${param1}"></p>
	<p th:text="${param2}"></p>
</footer>

※ th:fragment 가 있는 태그는 다른 곳에 포함되는 코드 조각의 개념으로 이해

 

 

1. HTML (부분 포함 insert)

<h2>부분 포함 insert</h2>
<div th:insert="~{template/fragment/footer :: copy}"></div>

1. 결과 (부분 포함 insert)

<h2>부분 포함 insert</h2>
<div>
<footer>
푸터 자리 입니다.
</footer>
</div>

<div th:insert="~{template/fragment/footer :: copy}"></div>

• th:insert 를 사용하여 현재 태그 <div> 내부에 추가

 

 

 

2. HTML (부분 포함 replace)

<h2>부분 포함 replace</h2>
<div th:replace="~{template/fragment/footer :: copy}"></div>

2. 결과 (부분 포함 replace)

<h2>부분 포함 replace</h2>
<footer>
푸터 자리 입니다.
</footer>

<div th:replace="~{template/fragment/footer :: copy}"></div>

• th:replace 를 사용하면 현재 태그 <div> 를 대체

 

 

 

3. HTML (부분 포함 단순 표현식)

<h2>부분 포함 단순 표현식</h2>
<div th:replace="template/fragment/footer :: copy"></div>

3. 결과 (부분 포함 단순 표현식)

<h2>부분 포함 단순 표현식</h2>
<footer>
푸터 자리 입니다.
</footer>

<div th:replace="template/fragment/footer :: copy"></div>

• ~{ . . . } 사용이 원칙이지만, 템플릿 조각을 사용하는 코드가 단순하면 해당 부분을 생략해도 무관

 

 

4. HTML (파라미터 사용)

<h1>파라미터 사용</h1>
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>

4. 결과 (파라미터 사용)

<h1>파라미터 사용</h1>
<footer>
<p>파라미터 자리 입니다.</p>
<p>데이터1</p>
<p>데이터2</p>
</footer>

<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></ div>

• 다음 코드와 같이 파라미터 전달을 통해 조각 렌더링 가능