๐ฟ Thymeleaf - Fragment (๊ณตํต์์ญ์ฒ๋ฆฌ)
๐
๊ฐ๋จํ Admin ํ์ด์ง ์ ๋๋ ์ค์ค๋ก ๋ง๋ค ์ ์๋๋ก ํ
ํ๋ฆฟ ์์ง์ ๊ณต๋ถํฉ๋๋ค !
๐ ๊ณตํต ์์ญ ์ฒ๋ฆฌ๋ฅผ ํ๋ ์ด์
์น ํ์ด์ง์ ๊ฒฝ์ฐ ๊ณตํต์ผ๋ก ๋ฐ๋ณต๋๋ ์์ญ์ด ๋ง์ด ์์ต๋๋ค.
ํ์ด์ง์ ์ ๋ณด๋ฅผ ๋ํ๋ด๋ ํค๋๋ถ๋ถ, ๋ฉ๋ด ํญ์ ๋ํ๋ด๋ ๋ค๋น๊ฒ์ด์
๋ฐ, ์ ์๊ถ ์ ๋ณด ๋ฑ์ ํ์ํ๋ ํธํฐ ๋ฑ ์ฌ๋ฌ ํ์ด์ง์ ๊ฑฐ์ณ ๋ฐ๋ณต๋๋ ์์ญ์ด ์กด์ฌํฉ๋๋ค.
์ด๋ฐ ๊ณตํต์ ์์ญ๋ค์ ๋งค ํ์ด์ง์ HTMLํ์ผ์ ๋ฐ๋ณตํ๋ค๋ฉด ๊ฐ ํ์ผ์ด ์ง์ ๋ถํด์ง๋ ๊ฒ์ ๋ฌผ๋ก ์ด๊ณ ๋ณ๊ฒฝ์ ์ง์ ๋ํ ๋ถ์ฐ๋๊ฒ ๋ฉ๋๋ค.
๊ณตํต์ ์์ญ์ ๋ถ๋ฆฌํจ์ผ๋ก์จ ๋ณ๊ฒฝ์ง์ ์ ์ต์ํํ ์ ์์ด์ ๋ณ๊ฒฝ์ ์ฐธ ์ฉ์ดํฉ๋๋ค.
๐ th:fagment ๋ฌธ๋ฒ
Thymeleaf๊ฐ ์ ๊ณตํ๋ fragment
๋ฌธ๋ฒ์ ๋ํด ๊ฐ๋จํ๊ฒ ์์๋ณผ๊ป์.
๋จผ์ ๊ณตํต ์์ญ์ ์ ์ํฉ๋๋ค.
<footer>
๋ฅผ th:fragment
๋ฅผ ์ด์ฉํด ์กฐ๊ฐํํ์๊ณ ์ด๋ฆ์ footerFragment
๋ก ์ค์ ํ์์ต๋๋ค.
[ footer.html ]
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<footer th:fragment="footerFragment">
<p> COPYRIGHT@ dhk22</p>
</footer>
</body>
</html>
fragment๋ ๋ํ์ ์ผ๋ก ๋ ๊ฐ์ง ๋ฐฉ๋ฒ์ผ๋ก ์ด์ฉํ ์ ์์ต๋๋ค.
๐ th:insert
insert
๋ ํ๊ทธ ๋ด๋ก ์กฐ๊ฐ์ ์ฝ์ ํ๋ ๋ฐฉ๋ฒ์ ๋๋ค.- ์ฌ๊ธฐ์ ํ๊ทธ ๋ด๋
<div>
์์ชฝ์<footer>
๊ฐ ์์นํ๋ ๊ฒ ์ ๋๋ค. - ๋๋๋งํ ๊ฒฐ๊ณผ๋ฅผ ์์ค๋ณด๊ธฐ๋ก ํ์ธํด๋ณด๋ฉด ์กฐ๊ฐํํ footer๊ฐ div ๋ด๋ก ์ฝ์
๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.
๐ th:replace
replace
๋ ํด๋น ํ๊ทธ๋ฅผ ์์ ํ ๋์ฒดํ๋ ๋ฐฉ๋ฒ์ ๋๋ค.- ๋๋๋งํ ๊ฒฐ๊ณผ๋ฅผ ์์ค๋ณด๊ธฐ๋ก ํ์ธํด๋ณด๋ฉด ์กฐ๊ฐํํ footer๊ฐ div๋ฅผ ๋์ฒดํ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.
์กฐ๊ฐ์ ์ฌ์ฉํ ๋๋ Thymeleaf๊ฐ ์ ๊ณตํ๋ ์กฐ๊ฐ ๋ฌธ๋ฒ์ธ ~{...}
๋ฅผ ์ฌ์ฉํฉ๋๋ค.
::
๋ฅผ ๊ธฐ์ค์ผ๋ก ์์๋ ์กฐ๊ฐ์ด ์๋ ๊ฒฝ๋ก๋ฅผ ๋ค์๋ ์กฐ๊ฐ์ ์ด๋ฆ์ ์ค์ ํด์ค๋๋ค.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>Main Page</h2>
<div th:insert="~{/test/footer :: footerFragment}"></div>
<div th:replace="~{/test/footer :: footerFragment}"></div>
</body>
</html>
๋๋๋ง ํ ๊ฒฐ๊ณผ์
๋๋ค.
๐ Fragment์์ ํ๋ผ๋ฏธํฐ ์ฌ์ฉ
fragment์ธก HTML ์ฝ๋์ ๋๋ค.
ํ๋ผ๋ฏธํฐ๋ฅผ ๋ฐ๋ ํ์์ด ๊ต์ฅํ ์ง๊ด์ ์ด์ฌ์ ์ฌ์ฉํ๊ธฐ์๋ ์ข์ ๊ฒ ๊ฐ์ต๋๋ค. ๋จ์ํ ์กฐ๊ฐ ์ด๋ฆ ์์ ํ๋ผ๋ฏธํฐ๋ฅผ ์์๋๋ก ์ ์ด์ฃผ์๋ฉด ๋ฉ๋๋ค.
ํํ์์ผ๋ก๋ Thymeleaf์ ์์ ํํ์์ธ |..|
์ ๋ณ์ ํํ์์ธ ${...}
๋ฅผ ์ฌ์ฉํ์์ต๋๋ค.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<footer th:fragment="footerFragmentParam (param1, param2)">
<p> COPYRIGHT@ dhk22</p><br/>
<p th:text="|Hi, ${param1}|"></p>
<p th:text="|Im ${param2}|"></p>
</footer>
</body>
</html>
fragment๋ฅผ ์ฌ์ฉํ๋ HTML ์ฝ๋์ ๋๋ค.
๊ธฐ์กด์ ๋ฐฉ์๊ณผ ๋์ผํ๊ฒ ์กฐ๊ฐ ํํ์์ธ ~{..}
์ ::
ํค์๋๋ฅผ ์ฌ์ฉ์๊ณ ํ๋ผ๋ฏธํฐ๋ก 'everyone' , 'kim'
์ ๋๊ฒจ์ฃผ์์ต๋๋ค.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>Main Page</h2>
<div th:replace="~{/test/footer :: footerFragmentParam ('everyone', 'kim')}"></div>
</body>
</html>
๋๋๋ง ๊ฒฐ๊ณผ์
๋๋ค.
๐ ํ๋ผ๋ฏธํฐ์ ๊ฐ์ด ์๋ ํ๊ทธ ์์ฒด๋ฅผ ์ ๋ฌ
Fragment
์ ํ๋ผ๋ฏธํฐ์๋ ๊ฐ ๋ฟ๋ง ์๋๋ผ ํ๊ทธ ์์ฒด๋ฅผ ์ ๋ฌํ ์ ์์ต๋๋ค.
Fragment ์ธก HTML ์ฝ๋์
๋๋ค.
์ฌ๊ธฐ์ ํ๋ผ๋ฏธํฐ๋ก ์ ๋ฌ๋๋ title
๊ณผ contents
๋ ํ๊ทธ์
๋๋ค.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body th:fragment="common_body(title, contents)">
<h1 th:replace="${title}">Title</h1>
<section th:replace="${contents}">contents</section>
</body>
</html>
Fragment๋ฅผ ์ฌ์ฉํ๋ ์ชฝ์ HTML ์ฝ๋์
๋๋ค.
h1
ํ๊ทธ์ section
ํ๊ทธ ์์ฒด๋ฅผ common_body
fragment์ ์ ๋ฌํด์ฃผ์์ต๋๋ค.
ํ๊ทธ ์ ๋ฌ์ ๋ฌธ๋ฒ์ด ์ข ์์ํ๋ฐ ~{::ํ๊ทธ๋ช
}
์
๋๋ค.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body th:replace="~{test/testFragment :: common_body(~{::h1}, ~{::section})}">
<h1>Main Page title</h1>
<section>
<h2>Main Page contents</h2>
</section>
</body>
</html>
๋๋๋ง ๊ฒฐ๊ณผ์
๋๋ค.
ํ๊ทธ๋ฅผ ์ง์ ์ ๋ฌํจ์ผ๋ก ์ข ๋ ๋ฒ์ฉ์ ์ธ ์กฐ๊ฐํ๊ฐ ๊ฐ๋ฅํด์ก์ต๋๋ค.
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐ฟ Thymeleaf - Fragment (๊ณตํต์์ญ์ฒ๋ฆฌ)), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@dhk22/Thymeleaf-Fragment-๊ณตํต์์ญ์ฒ๋ฆฌ์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค